jQuery .changefunction在DataTables第2页及其后的页面中不起作用

问题描述

我正在使用Jquery数据表并使用依赖于table的select标记，但是Jquery脚本在第二页及其后的页面中不起作用。我想基于所有页面中的选择标记来过滤表中的结果，但是一旦我从选择标记中选择选项，它就只过滤第一页中存在的行，而对于其余页面，我必须再次使用选择标记。我正在共享代码段。请提供一些建议，以使其适用于任何页面上的所有行。

<body>
    <select id="cato" class="form-control" >
        <option disabled selected="true">-Select Category-</option>
        <option>Electronics</option>
        <option>Sports</option>
    </select>

    <table class="table table-bordered" id="example"  data-order='[[ 0,"desc" ]]' data-page-length='3'>
        <thead>
            <tr>
                <th>Product</th>
                <th>Subcategory</th>
                <th>Category</th>
            </tr>
        </thead>
        <tbody id="r">
            <tr>
                <td>Samsung</td>
                <td>Mobile</td>
                <td>Electronics</td>
            </tr>
            <tr>
                <td>Racket</td>
                <td>Tennis</td>
                <td>Sports</td>
            </tr>
            <tr>
                <td>Bat</td>
                <td>Cricket</td>
                <td>Sports</td>
            </tr>
            <tr>
                <td>Dell</td>
                <td>Laptop</td>
                <td>Electronics</td>
            </tr>
            <tr>
                <td>Iphone</td>
                <td>Mobile</td>
                <td>Electronics</td>
            </tr>
        </tbody>
    </table>
</body>

表格

 <script type="text/javascript">
    var table = $('#example').DataTable({
    "bLengthChange": false,searching: false,});
  </script>

jQuery

<script>   
$('#cato').on('change',function() {
  var filter,table,tr,td,i;
  filter=$("#cato option:selected").text().toUpperCase();
  table = document.getElementById("r");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[2];          
    if (td) { 
      if ((td.innerHTML.toUpperCase().indexOf(filter) > -1))
      {
        tr[i].style.display = "";
      }
       else {
        tr[i].style.display = "none";
      }
    }       
  }
});

解决方法

我会选择另一种方法。

看我的例子：

var table = $('#example').DataTable({
  "bLengthChange": false,pageLength: 2,dom: 'tip'
});
  
$.fn.dataTable.ext.search.push(
    function( settings,data,dataIndex ) {
        
        var filter= $("#cato option:selected").text().toUpperCase();
        var subCategory = String(data[2]).toUpperCase();
 
        if ( filter == subCategory )
            return true;
        else
            return false;
    }
);
  
$('#cato').on('change',function() {
  table.draw()
});

<link href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>

<select id="cato" class="form-control">
  <option disabled selected="true">-Select Category-</option>
  <option>Electronics</option>
  <option>Sports</option>
</select>

<table id="example" class="table display">
  <thead>
    <tr>
      <th>Product</th>
      <th>Subcategory</th>
      <th>Category</th>
    </tr>
  </thead>
  <tbody id="r">
    <tr>
      <td>Samsung</td>
      <td>Mobile</td>
      <td>Electronics</td>
    </tr>
    <tr>
      <td>Racket</td>
      <td>Tennis</td>
      <td>Sports</td>
    </tr>
    <tr>
      <td>Bat</td>
      <td>Cricket</td>
      <td>Sports</td>
    </tr>
    <tr>
      <td>Dell</td>
      <td>Laptop</td>
      <td>Electronics</td>
    </tr>
    <tr>
      <td>Iphone</td>
      <td>Mobile</td>
      <td>Electronics</td>
    </tr>
    <tr>
      <td>Soccer Ball</td>
      <td>Soccer</td>
      <td>Sports</td>
    </tr>
  </tbody>
</table>

重要：为了使$.fn.dataTable.ext.search.push(正常工作，jQuery DataTable searching选项必须为 true （其默认值），否则为它不会工作。但是，如果您不想使用默认搜索框，甚至不想将其隐藏，则可以使用：

dom property

在我的示例中，我使用了值tip。如您在上面的链接中所见...

t -是 t 本身
i -是表 i 信息摘要
p -是 p 混合控件

快乐编码！

datatables html javascript

jQuery .changefunction在DataTables第2页及其后的页面中不起作用

问题描述

解决方法

相关问答