How do I make my dataTable sorted if the data is ACTIVE or INACTIVE using JQuery and Ajax?

My goal is that I want to sort my data if it is still ACTIVE or INACTIVE. But the result I’ve got is that if I click active it only shows the active data and when inactive it doesn’t show. I don’t have syntax errors but logical errors. I am using PHP, JQuery/AJAX.

Here is my code in HTML

    <?php 
    include('../include/header_ps.php');
    ?>
    
    <!DOCTYPE html>
    <html lang="en">

<body>
    <div id="page-wrapper">
        <div class="row">
            <div class="col-lg-12">
                <h1 class="page-header"> Table of Tools Specification
                    <a href="../forms/form_toolspec.php">
                        <button class="btn btn-primary pull-right">
                            <span class="fa fa-plus-circle"></span>
                            Add Record
                        </button>
                    </a>
                </h1>
            </div>
            <!-- /.col-lg-12 -->
        </div>
        <!-- Status -->
        <div>

            <form action="GET">
                <div class="form-group">
                    <label> Table group by Status </label>
                    <select name="selector_id" style="width:200px;" class="show-menu-arrow form-control" id="stats" required>
                        <option value="1" id="active" selected=""> ACTIVE </option>
                        <option value="0" id="inactive"> INACTIVE </option>
                    </select>
                </div>
            </form>
        </div>

        <!-- /.row -->
        <div class="row">
            <div class="col-lg-12">
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        Table of Tools Specification
                    </div>
                    <!-- /.panel-heading -->
                    <div class="panel-body">
                        <div class="table-responsive">
                        <table width="100%" class="table table-striped table-bordered table-hover" id="dataTables">
                                <thead>
                                    <tr>
                                        <th> Tools Name </th>
                                        <th> Model No. </th>
                                        <th> Value </th>
                                        <th> Number of days </th>
                                        <th><center> Status </center></th>
                                    </tr>
                                </thead>
                                <?php
                                $con->next_result();
                                $result = mysqli_query($con, "CALL GetToolSpecByStatus(1)");  ?>
                                <tbody>
                                    <?php while ($row = mysqli_fetch_assoc($result)) { ?>

                                    <?php echo "<tr>"; ?>
                                    <?php echo "<td><a href='edit_toolspec.php?ID=".$row['ID']."' style='color:red;'>" . $row['tools_name'] . "</a></td>"; ?>
                                    <?php echo "<td>" . $row['model_num'] . "</td>"; ?>
                                    <?php echo "<td>" . $row['model_num_val'] . "</td>"; ?>
                                    <?php echo "<td>" . $row['no_of_days'] . "</td>"; ?>
                                    <td>
                                        <center>
                                            <p data-id="<?php echo $row['ID'];?>"
                                                class="status_checks statusButton <?php echo ($row['status'])? 'btn-success': 'btn-danger'?>" >
                                                <?php echo ($row['status'])? 'Active' : 'Inactive'?>
                                            </p>
                                        </center>
                                    </td>
                                    <?php echo "</tr>"; ?>

                                    <?php } ?>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

JavaScript
​x
 
    <?php     include('../include/header_ps.php');    ?>        <!DOCTYPE html>    <html lang="en">​<body>    <div id="page-wrapper">        <div class="row">            <div class="col-lg-12">                <h1 class="page-header"> Table of Tools Specification                    <a href="../forms/form_toolspec.php">                        <button class="btn btn-primary pull-right">                            <span class="fa fa-plus-circle"></span>                            Add Record                        </button>                    </a>                </h1>            </div>            <!-- /.col-lg-12 -->        </div>        <!-- Status -->        <div>​            <form action="GET">                <div class="form-group">                    <label> Table group by Status </label>                    <select name="selector_id" style="width:200px;" class="show-menu-arrow form-control" id="stats" required>                        <option value="1" id="active" selected=""> ACTIVE </option>                        <option value="0" id="inactive"> INACTIVE </option>                    </select>                </div>            </form>        </div>​        <!-- /.row -->        <div class="row">            <div class="col-lg-12">                <div class="panel panel-primary">                    <div class="panel-heading">                        Table of Tools Specification                    </div>                    <!-- /.panel-heading -->                    <div class="panel-body">                        <div class="table-responsive">                        <table width="100%" class="table table-striped table-bordered table-hover" id="dataTables">                                <thead>                                    <tr>                                        <th> Tools Name </th>                                        <th> Model No. </th>                                        <th> Value </th>                                        <th> Number of days </th>                                        <th><center> Status </center></th>                                    </tr>                                </thead>                                <?php                                $con->next_result();                                $result = mysqli_query($con, "CALL GetToolSpecByStatus(1)");  ?>                                <tbody>                                    <?php while ($row = mysqli_fetch_assoc($result)) { ?>​                                    <?php echo "<tr>"; ?>                                    <?php echo "<td><a href='edit_toolspec.php?ID=".$row['ID']."' style='color:red;'>" . $row['tools_name'] . "</a></td>"; ?>                                    <?php echo "<td>" . $row['model_num'] . "</td>"; ?>                                    <?php echo "<td>" . $row['model_num_val'] . "</td>"; ?>                                    <?php echo "<td>" . $row['no_of_days'] . "</td>"; ?>                                    <td>                                        <center>                                            <p data-id="<?php echo $row['ID'];?>"                                                class="status_checks statusButton <?php echo ($row['status'])? 'btn-success': 'btn-danger'?>" >                                                <?php echo ($row['status'])? 'Active' : 'Inactive'?>                                            </p>                                        </center>                                    </td>                                    <?php echo "</tr>"; ?>​                                    <?php } ?>                                </tbody>                            </table>                        </div>                    </div>                </div>            </div>        </div>    </div></body></html>​ ​

Here is my code in Javascript/Jquery

    <script>
    $('#dataTables').DataTable();
    </script>
    
    <!-- Need ajax -->
    <script>
    $("#stats").change(function() {
        var val = $(this).val() == 1 ? "Active" : "Inactive"
        console.log(val)
        $("table tbody tr").hide()
        $("table tr").find(".status_checks:contains(" + val + ")").closest("tr").show()
    })
    
    
    $(document).on('click', '.status_checks', function() {
        var status = '1';
        if ($(this).hasClass("btn-success")) {
            status = '0';
        }
        var id = $(this).data('id');
    
        $.ajax({
            type: "POST",
            url: "../forms/form_statusForspecs.php",
            data: {
                id: id,
                status: status
            },
            
            success: function(data) {
                // alert(data);
                location.reload();
            }
        });
    });
    
    
    </script>

JavaScript
 
    <script>    $('#dataTables').DataTable();    </script>        <!-- Need ajax -->    <script>    $("#stats").change(function() {        var val = $(this).val() == 1 ? "Active" : "Inactive"        console.log(val)        $("table tbody tr").hide()        $("table tr").find(".status_checks:contains(" + val + ")").closest("tr").show()    })            $(document).on('click', '.status_checks', function() {        var status = '1';        if ($(this).hasClass("btn-success")) {            status = '0';        }        var id = $(this).data('id');            $.ajax({            type: "POST",            url: "../forms/form_statusForspecs.php",            data: {                id: id,                status: status            },                        success: function(data) {                // alert(data);                location.reload();            }        });    });            </script> ​   ​

Here is the php for AJAX where the the INACTIVE data should be displayed.

<?php 

include('../include/connect.php');
    
 
 
$user_id=$_POST['id'];
$newStatus=$_POST['status'];
$query = "UPDATE tools_spec SET status='$newStatus' WHERE ID = '$user_id'";
$result = mysqli_query($con, $query);
    if($result === TRUE)
    {
        echo json_encode(1);
    }
    else
    {
        echo json_encode(0);
    }
?>
    <?php
    $con->next_result();
    $result = mysqli_query($con,"CALL GetToolSpecByStatus(0)");  ?>

    <tbody>
        <?php while ($row = mysqli_fetch_assoc($result)) { ?>

        <?php echo '<tr>'; ?>
        <?php echo "<td><a href='edit_toolspec.php?ID=".$row['ID']."' style='color:red;'>" . $row['tools_name'] . "</a></td>"; ?>
        <?php echo "<td>" . $row['model_num'] . "</a></td>"; ?>
        <?php echo "<td>" . $row['model_num_val'] . "</td>"; ?>
        <?php echo "<td>" . $row['no_of_days'] . "</td>"; ?>
        <td>
            <center>
                <p data-id="<?php echo $row['ID'];?>"
                    class="status_checks statusButton <?php echo ($row['status'])? 'btn-success': 'btn-danger'?>">
                    <?php echo ($row['status'])? 'Active' : 'Inactive'?>
                </p>
            </center>
        </td>
        <?php echo '<tr>'; ?>
        <?php } ?>
    </tbody>

JavaScript
 
<?php ​include('../include/connect.php');      $user_id=$_POST['id'];$newStatus=$_POST['status'];$query = "UPDATE tools_spec SET status='$newStatus' WHERE ID = '$user_id'";$result = mysqli_query($con, $query);    if($result === TRUE)    {        echo json_encode(1);    }    else    {        echo json_encode(0);    }?>    <?php    $con->next_result();    $result = mysqli_query($con,"CALL GetToolSpecByStatus(0)");  ?>​    <tbody>        <?php while ($row = mysqli_fetch_assoc($result)) { ?>​        <?php echo '<tr>'; ?>        <?php echo "<td><a href='edit_toolspec.php?ID=".$row['ID']."' style='color:red;'>" . $row['tools_name'] . "</a></td>"; ?>        <?php echo "<td>" . $row['model_num'] . "</a></td>"; ?>        <?php echo "<td>" . $row['model_num_val'] . "</td>"; ?>        <?php echo "<td>" . $row['no_of_days'] . "</td>"; ?>        <td>            <center>                <p data-id="<?php echo $row['ID'];?>"                    class="status_checks statusButton <?php echo ($row['status'])? 'btn-success': 'btn-danger'?>">                    <?php echo ($row['status'])? 'Active' : 'Inactive'?>                </p>            </center>        </td>        <?php echo '<tr>'; ?>        <?php } ?>    </tbody>​

Here is the link of the image

Answer

Instead of location.reload() you can change p tag class and text inside your success function of ajax . So, if the button has class btn-success remove this class using removeClass() method and add btn-danger class using addClass() method and vice-versa.

Demo Code :

$(document).on('click', '.status_checks', function() {
  var status = '1';
  var selector = $(this) //declare here
  if (selector.hasClass("btn-success")) {
    status = '0';
  }
  var id = $(this).data('id');
  console.log(id + "--" + status)
  /* $.ajax({
     type: "POST",
     url: "../forms/form_statusForspecs.php",
     data: {
       id: id,
       status: status
     },

     success: function(data) {*/
  //check if selector has class success (remove and add class and change text)
  selector.hasClass("btn-success") ? (selector.removeClass("btn-success").addClass("btn-danger"), selector.text("Inactive")) : (selector.removeClass("btn-danger").addClass("btn-success"), selector.text("Active"))
  /*}
  });*/
});

JavaScript
 
$(document).on('click', '.status_checks', function() {  var status = '1';  var selector = $(this) //declare here  if (selector.hasClass("btn-success")) {    status = '0';  }  var id = $(this).data('id');  console.log(id + "--" + status)  /* $.ajax({     type: "POST",     url: "../forms/form_statusForspecs.php",     data: {       id: id,       status: status     },​     success: function(data) {*/  //check if selector has class success (remove and add class and change text)  selector.hasClass("btn-success") ? (selector.removeClass("btn-success").addClass("btn-danger"), selector.text("Inactive")) : (selector.removeClass("btn-danger").addClass("btn-success"), selector.text("Active"))  /*}  });*/});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<table width="100%" class="table table-striped table-bordered table-hover" id="dataTables">
  <thead>
    <tr>
      <th> Tools Name </th>
      <th> Model No. </th>
      <th> Value </th>
      <th> Number of days </th>
      <th>
        <center> Status </center>
      </th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td><a href='edit_toolspec.php?ID=1' style='color:red;'> something</a></td>
      <td>1</td>
      <td>1</td>
      <td>2</td>
      <td>
        <center>
          <p data-id="1" class="status_checks statusButton btn-success">Active
          </p>
        </center>
      </td>
    </tr>
    <tr>
      <td><a href='edit_toolspec.php?ID=2' style='color:red;'> something</a></td>
      <td>2</td>
      <td>1</td>
      <td>2</td>
      <td>
        <center>
          <p data-id="2" class="status_checks statusButton btn-danger"> Inactive </p>
        </center>
      </td>
    </tr>

    <tr>
      <td><a href='edit_toolspec.php?ID=3' style='color:red;'> something3</a></td>
      <td>23</td>
      <td>1</td>
      <td>2</td>
      <td>
        <center>
          <p data-id="3" class="status_checks statusButton btn-danger"> Inactive </p>
        </center>
      </td>
  </tbody>
</table>

JavaScript
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>​<table width="100%" class="table table-striped table-bordered table-hover" id="dataTables">  <thead>    <tr>      <th> Tools Name </th>      <th> Model No. </th>      <th> Value </th>      <th> Number of days </th>      <th>        <center> Status </center>      </th>    </tr>  </thead>​  <tbody>    <tr>      <td><a href='edit_toolspec.php?ID=1' style='color:red;'> something</a></td>      <td>1</td>      <td>1</td>      <td>2</td>      <td>        <center>          <p data-id="1" class="status_checks statusButton btn-success">Active          </p>        </center>      </td>    </tr>    <tr>      <td><a href='edit_toolspec.php?ID=2' style='color:red;'> something</a></td>      <td>2</td>      <td>1</td>      <td>2</td>      <td>        <center>          <p data-id="2" class="status_checks statusButton btn-danger"> Inactive </p>        </center>      </td>    </tr>​    <tr>      <td><a href='edit_toolspec.php?ID=3' style='color:red;'> something3</a></td>      <td>23</td>      <td>1</td>      <td>2</td>      <td>        <center>          <p data-id="3" class="status_checks statusButton btn-danger"> Inactive </p>        </center>      </td>  </tbody></table>

Advertisement

Answer