Fatal编程技术网
  • jquery/
  • Jquery 数据表的自定义筛选器

Jquery 数据表的自定义筛选器

jquery html twitter-bootstrap

Jquery 数据表的自定义筛选器,jquery,html,twitter-bootstrap,css-tables,Jquery,Html,Twitter Bootstrap,Css Tables,我正在尝试将自己的筛选器添加到数据表的第二列。下面是我的代码 <!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;

我正在尝试将自己的筛选器添加到数据表的第二列。下面是我的代码

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


桌子{
边框：1px纯蓝色；
}
tr{
边框：1px纯蓝色；
}
运输署{
边框：1px纯蓝色；
}
tfoot输入{
宽度：100%；
填充：3倍；
框大小：边框框；
}
// http://obvcode.blogspot.com/2007/11/easiest-way-to-check-ie-version-with.html
$（文档）.ready（函数（）{
var table=$（'#mine'）.DataTable（）；
$（'#mine tfoot th'）。每个（函数（）{
var title=$（this.text（）；
$（this.html（“”）；
} );
$（'#myInput'）.keyup（函数（）{
table.draw（）；
} );
});
函数myFunction（）{
//声明变量
var输入、过滤器、表格、tr、td、i；
输入=document.getElementById（“myInput”）；
filter=input.value.toUpperCase（）；
表=document.getElementById（“我的”）；
tr=table.getElementsByTagName（“tr”）；
//循环遍历所有表行，并隐藏与搜索查询不匹配的行
对于（i=0；i-1）{
tr[i].style.display=“”；
}否则{
tr[i].style.display=“无”；
}
}
}
}
ade：
A.
A.
A.
A.
A.
A.
A.
位置
办公室
年龄
开始日期
薪水
苏丹武装部队
苏丹武装部队
苏丹武装部队
苏丹武装部队
苏丹武装部队
苏丹武装部队
A.
Q
苏丹武装部队
B
B
C
A.
Q
B
苏丹武装部队
B
C
A.
Q
B
B
苏丹武装部队
C
苏丹武装部队
苏丹武装部队
A.
B
C
C
A.
B
A.
B
C
C
A.
B
A.
B
C
C
A.
B
C
A.
B
C
A.
A.
B
C
B
C
A.
A.
B
C
B
C
A.
B
A.
B
C
C
A.
B
A.
B
C
C
A.
A.
B
C
B
C
A.
A.
B
C
B
C
A.
B
A.
B
C
C
A.
A.
B
C
B
C
A.
A.
B
C
B
C
A.
B
A.
B
C
C
A.
B
A.
B
C
C
A.
B
A.
B
苏丹武装部队
C
A.
A.
B
C
B
苏丹武装部队
A.
苏丹武装部队
B
C
B
C
A.
苏丹武装部队
B
C
B
C
A.
A.
苏丹武装部队
C
B
C
A.
B
A.
B
C
C
A.
A.
B
C
B
C
A.
A.
B
C
B
C
A.
A.
B
C
B
C
A.
A.
B
C
B
C
A.
A.
B
C
B
C
A.
A.
B
C
B
C
A.
A.
B
C
B
C
A.
A.
B
C
B
C
过滤器在第一页中工作正常。但当过滤器应用于整个表时，若该项出现在表的第一页中，它会过滤特定的表行。但是，如果该项出现在表的下一页中，则不会应用筛选器。有谁能帮我解决这个问题吗？

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

但是，datatables有一个超级酷的正则表达式过滤器搜索，您可以应用它

下面是一段代码的片段，可能会有所帮助。尽管我们可能使用不同的版本（dataTable与dataTable）

以下是datatables搜索API的链接：

在
myFunction
中，您可以记录
tr.length
？它通常与在
table中获取所有表行有关。getElementsByTagName（“tr”）
它不会获取所有表行，因为
datatable.css
隐藏了表的其余部分rows@Arvind对你说的对。 
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(); 

       }
     });