Question

我正在尝试将自己的过滤器添加到Data table的第二列。以下是我的代码。

<!doctype html>
<html>
<head>
  <style>
table{
border:1px solid blue;
}
tr{
border:1px solid blue;
}
td{
border:1px solid blue;
}
tfoot input {
        width: 100%;
        padding: 3px;
        box-sizing: border-box;
    }
</style>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="http://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
<script>
// http://obvcode.blogspot.com/2007/11/easiest-way-to-check-ie-version-with.html
$(document).ready(function(){
    var table =  $('#mine').DataTable();

$('#mine tfoot th').each( function () {
        var title = $(this).text();
        $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
    } );

$('#myInput').keyup( function() {
        table.draw();
    } );
});
</script>
<script>

function myFunction() {
  // Declare variables
  var input, filter, table, tr, td, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("mine");
  tr = table.getElementsByTagName("tr");

  // Loop through all table rows, and hide those who don't match the search query
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[1];
    if (td) {
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
         tr[i].style.display = "none";
      }
      }
    }
  }

</script>
</head>
<body>
<table border="0" cellpadding="5" cellspacing="5">
<tbody><tr>
<td>ade:</td><td>
<input type="text" id="myInput" name="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
</td></tr>
</tbody></table>
    <table id="mine" class="display" width="100%" cellspacing="0">
<thead>
<th>a</th>
<th>a</th>
<th>a</th>
<th>a</th>
<th>a</th>
<th>a</th>
</thead>
 <tfoot>
            <tr>
                <th>a</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
<tbody>
<tr><td>saf</td>
<td>saf</td>
<td>saf</td>
<td>saf</td>
<td>saf</td>
<td>saf</td></tr>
<tr><td>a</td>
<td>q</td>
<td>saf</td>
<td>b</td>
<td>b</td>
<td>c</td></tr>
<tr><td>a</td>
<td>q</td>
<td>b</td>
<td>saf</td>
<td>b</td>
<td>c</td></tr>
<tr><td>a</td>
<td>q</td>
<td>b</td>
<td>b</td>
<td>saf</td>
<td>c</td></tr>
<tr><td>saf</td>
<td>saf</td>
<td>a</td>
<td>b</td>
<td>c</td>
<td>c</td></tr>
<tr><td>a</td>
<td>b</td>
<td>a</td>
<td>b</td>
<td>c</td>
<td>c</td></tr>
<tr><td>a</td>
<td>b</td>
<td>a</td>
<td>b</td>
<td>c</td>
<td>c</td></tr>
<tr><td>a</td>
<td>b</td>
<td>c</td>
<td>a</td>
<td>b</td>
<td>c</td></tr>
<tr><td>a</td>
<td>a</td>
<td>b</td>
<td>c</td>
<td>b</td>
<td>c</td></tr>
<tr><td>a</td>
<td>a</td>
<td>b</td>
<td>c</td>
<td>b</td>
<td>c</td></tr>
<tr><td>a</td>
<td>b</td>
<td>a</td>
<td>b</td>
<td>c</td>
<td>c</td></tr>
<tr><td>a</td>
<td>b</td>
<td>a</td>
<td>b</td>
<td>c</td>
<td>c</td></tr>
<tr><td>a</td>
<td>a</td>
<td>b</td>
<td>c</td>
<td>b</td>
<td>c</td></tr>
<tr><td>a</td>
<td>a</td>
<td>b</td>
<td>c</td>
<td>b</td>
<td>c</td></tr>
<tr><td>a</td>
<td>b</td>
<td>a</td>
<td>b</td>
<td>c</td>
<td>c</td></tr>
<tr><td>a</td>
<td>a</td>
<td>b</td>
<td>c</td>
<td>b</td>
<td>c</td></tr>
<tr><td>a</td>
<td>a</td>
<td>b</td>
<td>c</td>
<td>b</td>
<td>c</td></tr>
<tr><td>a</td>
<td>b</td>
<td>a</td>
<td>b</td>
<td>c</td>
<td>c</td></tr>
<tr><td>a</td>
<td>b</td>
<td>a</td>
<td>b</td>
<td>c</td>
<td>c</td></tr>
<tr><td>a</td>
<td>b</td>
<td>a</td>
<td>b</td>
<td>saf</td>
<td>c</td></tr>
<tr><td>a</td>
<td>a</td>
<td>b</td>
<td>c</td>
<td>b</td>
<td>saf</td></tr>
<tr><td>a</td>
<td>saf</td>
<td>b</td>
<td>c</td>
<td>b</td>
<td>c</td></tr>
<tr><td>a</td>
<td>saf</td>
<td>b</td>
<td>c</td>
<td>b</td>
<td>c</td></tr>
<tr><td>a</td>
<td>a</td>
<td>saf</td>
<td>c</td>
<td>b</td>
<td>c</td></tr>
<tr><td>a</td>
<td>b</td>
<td>a</td>
<td>b</td>
<td>c</td>
<td>c</td></tr>
<tr><td>a</td>
<td>a</td>
<td>b</td>
<td>c</td>
<td>b</td>
<td>c</td></tr>
<tr><td>a</td>
<td>a</td>
<td>b</td>
<td>c</td>
<td>b</td>
<td>c</td></tr>
<tr><td>a</td>
<td>a</td>
<td>b</td>
<td>c</td>
<td>b</td>
<td>c</td></tr>
<tr><td>a</td>
<td>a</td>
<td>b</td>
<td>c</td>
<td>b</td>
<td>c</td></tr>
<tr><td>a</td>
<td>a</td>
<td>b</td>
<td>c</td>
<td>b</td>
<td>c</td></tr>
<tr><td>a</td>
<td>a</td>
<td>b</td>
<td>c</td>
<td>b</td>
<td>c</td></tr>
<tr><td>a</td>
<td>a</td>
<td>b</td>
<td>c</td>
<td>b</td>
<td>c</td></tr>
<tr><td>a</td>
<td>a</td>
<td>b</td>
<td>c</td>
<td>b</td>
<td>c</td></tr>
</tbody>
</table>

</body>
</html>

过滤器在第一页中正常工作。但是当过滤器应用于整个表时，如果项存在于表的第一页中，则它会过滤特定的表行。但是，如果该项目的下一页中存在该项目，则不会应用该过滤器。任何人都可以帮我解决这个问题吗？

Answer 1

这是因为dom无法使用表的其余部分，您需要使用datatables API对其进行过滤。有点令人困惑，但数据表通常会在调用时加载每个页面，以节省开销。您不能只使用jquery搜索整个数据表（除非整个表格显示在您的页面上），您需要使用API

但是，数据表有一个超酷的正则表达式过滤搜索，你可以申请

这是一段可能有用的代码片段。虽然我们可能使用不同的版本（dataTable vs DataTable）

var search_text = [search text]
var table = $('[table selector]').dataTable().api();
       if (search_text){
         table
            .columns(3)
            .search('[REGEX SEARCH TEXT]', true, false)
            .draw();
       } 
    else{ 
        table
            .columns()
            .search('')
            .draw(); 

       }
     });

以下是数据表搜索API的链接：

https://datatables.net/examples/api/regex.html

自定义过滤器到Datatable

1 个答案: