如何将 jQuery 过滤器添加到 html 表中答案

【问题标题】：How to add a jQuery filter to a html table如何将 jQuery 过滤器添加到 html 表中
【发布时间】：2019-01-15 19:52:30
【问题描述】：

我正在尝试将 jquery 下拉过滤器添加到从数据库中提取的表中

我提到了一些类似的问题，并从其中一个问题中获得了代码。我可以让下拉前端工作，但被后端卡住了。

report.php

<div id="container">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> 
</script>
<label for="filter">Gender:</label>
<select class="filter" data-tableId="myTable">
  <option value="all">All</option>
  <option value="male">Male</option>
  <option value="female">Female</option>
</select>
  <body>
  <i style="font-size:24px" class="fa">&#xf019;</i>
  </body>
   </html>
<div class="table-responsive">
    <table id ="myTable" class="table table-striped">
      <thead>
        <tr>
          <th> First Name </th>
          <th> Last Name </th>                  
          <th> Phone </th>
          <th> Email </th>              
          <th> Gender </th>
          <th> Action </th>  
        </tr>
      </thead> 
      <?php
        if (count($report) === 0) {
            echo "<tr>No Reports</tr>";
        } else {
            for ($i = 0; $i < count($report); $i++) {
                echo
                "<tr>
                    <td>{$report[$i]['FName']}</td>
                    <td>{$report[$i]['LName']}</td>
                    <td>{$report[$i]['HPhone']}</td>
                    <td>{$report[$i]['PEmail']}</td>
                    <td>{$report[$i]['Gender']}</td>

                    <td><a class=btn href='read.php?id=".$report[$i]['RegId']."'>Read</a></td>    
                </tr>"; 
            }
        }
      ?>
    </table> 
</div>

main.js

$(".filter").change(function() {
  var filterValue = $(this).val();
  var row = $('.row'); 

  row.hide();
  row.each(function(i, el) {
    if($(el).attr('data-type') === filterValue) {
      $(el).show();
    }
  }); 
});

我想把过滤器放在表格的性别列上。

我确定 main.js 中存在一些错误，并且已经尝试解决了一段时间但找不到它。我是 jquery 的新手，任何帮助将不胜感激。 TIA

【问题讨论】：

首先你在哪里添加类.row，似乎无法在你的html中找到它？我也看不到您将data-type 添加到元素的位置
应该是tr的id和class，不知道怎么放，放哪里
我确定问题不在于您的 jquery，而是您的 php 每个循环，您似乎没有在任何地方添加 row 类或 data-type
是的，也许。知道应该怎么做吗？
我参考了以下问题并从那里得到了 jquery stackoverflow.com/questions/38334897/…

标签： php jquery filter

【解决方案1】：

您可以使用 AJAX 来处理此任务。

HTML 代码：

<form name="formobject" method="POST" action="">
<input type="hidden" name="formrstatus" value="">
<select class="filter" data-tableId="myTable" onchange="checkValue(this.value)">
  <option value="all">All</option>
  <option value="male">Male</option>
  <option value="female">Female</option>
</select>
</form>

<script>
</script>
function checkValue(id){
$.ajax({
type: "POST",
url:"/someurl",
dataType: 'JSON',
data: {id},
success: function(response) {
                //use this response to fetch table data
},
error: function(XMLHttpRequest, textStatus, errorThrown) {

   }
});
}

/*Use api to fetch the values according to the posted value and return the json encoded value, something like this*/

<?php
$id=encodestring($_POST["id"]);

$sql="select * from sometable where gender='".$id."'";
$result= $mysqli->query($sql);

$vars[] = array($res);

echo json_encode($vars);
?>

【讨论】：