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

Question

我正在使用 Jquery 數據表並使用依賴於表的 select 標記，但 Jquery 腳本在第二頁及之后不起作用。 我想根據所有頁面中的 select 標記過濾表中的結果，但是一旦我從 select 標記中選擇選項，它只會過濾第一頁中存在的行，而對於其余頁面，我必須再次使用 Z99938282E1807184599416 標記。 我正在分享代碼片段。 請提供一些建議，使其適用於任何頁面的所有行。

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

Answer 1

我會 go 采用不同的方法。

看我的例子：

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

在我的示例中，我使用了 value tip 。 正如你在上面的鏈接中看到的......

t - 是表本身
i - 是表信息匯總
p - 是分頁控制

快樂編碼！

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