Как добавить фильтр JQuery в HTML-таблицу - PullRequest
Новая
       3

Как добавить фильтр JQuery в HTML-таблицу

0 голосов
/ 15 января 2019

Я пытаюсь добавить выпадающий фильтр 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, любая помощь будет оценена. ТИА

Ответы [ 2 ]

0 голосов
/ 16 января 2019

Вы можете использовать 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);
?>
0 голосов
/ 16 января 2019 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
    $("#myInput").on("keyup", function() {
      var value = $(this).val().toLowerCase();
      $("#myTable tr").filter(function() {
        $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
      });
    });
  });
</script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...