时间戳

首页 > 解决方案 > 如果数据是 ACTIVE 或 INACTIVE 使用 JQuery 和 Ajax，我如何使我的 dataTable 排序？

javascript - 如果数据是 ACTIVE 或 INACTIVE 使用 JQuery 和 Ajax，我如何使我的 dataTable 排序？

问题描述

我的目标是如果我的数据仍然处于活动或不活动状态，我想对其进行排序。但是我得到的结果是，如果我单击活动，它只会显示活动数据，而当不活动时它不会显示。我没有语法错误，而是逻辑错误。我正在使用 PHP、JQuery/AJAX。

这是我的 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/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>

这是 AJAX 的 php，其中应显示 INACTIVE 数据。

<?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>

这是图片的链接

标签： javascriptphpjqueryajax

解决方案

而不是location.reload()您可以在 ajax 的成功函数中更改p标记类和文本。因此，如果按钮具有类，则使用方法btn-success删除此类removeClass()并使用方法添加btn-danger类addClass()，反之亦然。

演示代码：

$(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>

推荐阅读