JQuery.change(function) 在 DataTables 第 2 页及之后不起作用

Question

I am using Jquery data-table and using select tag which is dependent on table, but Jquery script doesn't work on second page and after.我正在使用 Jquery 数据表并使用依赖于表的 select 标记，但 Jquery 脚本在第二页及之后不起作用。 I want to filter results in table based on select tag in all pages but as soon as I choose option from select tag it only filters the rows present in the first page and for the remaining pages again I have to use select tag.我想根据所有页面中的 select 标记过滤表中的结果，但是一旦我从 select 标记中选择选项，它只会过滤第一页中存在的行，而对于其余页面，我必须再次使用 Z99938282E1807184599416 标记。 I am sharing code snippet.我正在分享代码片段。 Please provide some suggestion to make it work for all rows at any page.请提供一些建议，使其适用于任何页面的所有行。

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

Table桌子

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

Jquery 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";
      }
    }       
  }
});

Answer 1

I would go for a different approach.我会 go 采用不同的方法。

Look at my example:看我的例子：

 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>

Important: In order for $.fn.dataTable.ext.search.push( to work properly, the jQuery DataTable searching option must be true (its default value), otherwise it won't work. But if you don't want to use the default search box or even hide it, you could use the:重要提示：为了使$.fn.dataTable.ext.search.push(正常工作，jQuery DataTable searching选项必须为true （其默认值），否则它将不起作用。但如果您不想使用默认搜索框甚至隐藏它，您可以使用：

dom property dom 属性

In my example I used the value tip .在我的示例中，我使用了 value tip 。 As you can see in the above link...正如你在上面的链接中看到的......

t - is the t able itself t - 是表本身
i - is Table i nformation summary i - 是表信息汇总
p - is p agination control p - 是分页控制

Happy Coding!快乐编码！

JQuery.change(function) 在 DataTables 第 2 页及之后不起作用

问题描述

1 个解决方案

解决方案1
0 已采纳 2020-08-12 07:34:26

JQuery.change(function) 在 DataTables 第 2 页及之后不起作用

问题描述

1 个解决方案

解决方案1 0 已采纳 2020-08-12 07:34:26

解决方案1
0 已采纳 2020-08-12 07:34:26