jQuery - 第三方表格插件DataTables使用详解17(数据搜索)
二十八、搜索、过滤的设置
1,是否启用搜索功能
(1)默认情况下在表格右上方有一个用于过滤结果的文本输入框:

(2)将 searching 配置属性设置为 false 可以将其隐藏:

$('#myTable').DataTable({ "searching": false, //不显示搜索框 //.......
2,在 td 标签上指定用于搜索的值
默认情况下搜索功能都是根据单元格里的内容进行搜索的。我们可以通过 data-search 标签属性指定与内容不同的值,该值专门用于搜索(不会在界面上显示出来)。<table id="myTable"> <thead> <tr> <th>编号</th> <th>姓名</th> <th>出生日期</th> </tr> </thead> <tbody> <tr> <td>011</td> <td>张三</td> <td data-search="10st November 2016 10/11/2016">2016-11-10</td> </tr> <tr> <td>002</td> <td>李四</td> <td data-search="23st November 2001 23/11/2001">2001-11-23</td> </tr> </tbody> </table>
二十九、搜索指定列数据
默认的搜索功能全局的,也就是对表格中所有数据都会进行搜索。我们还可以指定某一列或者某几列进行搜索。
1,效果图
(1)我们在表格的 footer 上放置 3 个输入框(每一列对应一个)。

(2)当输入框内容改变时,自动对该列数据进行筛选。

(3)不同列分别使用不同条件同时进行搜索也是可以的。

2,样例代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery-3.1.1.js" type="text/javascript"></script> <script src="media/js/jquery.dataTables.js" type="text/javascript"></script> <link rel="stylesheet" href="media/css/jquery.dataTables.css" type="text/css" /> <script type="text/javascript"> $(document).ready(function() { $('#myTable').DataTable({ "ajax": "data.txt" }); //在每一个footer单元格中添加一个input输入框 $('#myTable tfoot th').each( function () { var title = $(this).text(); $(this).html( '<input type="text" placeholder="Search '+title+'" />' ); } ); //获取DataTable对象 var table = $('#myTable').DataTable(); //根据footer输入框的内容进行搜索 table.columns().every( function () { var that = this; $( 'input', this.footer() ).on( 'keyup change', function () { if ( that.search() !== this.value ) { that .search( this.value ) .draw(); } } ); } ); }); </script> </head> <body> <table id="myTable"> <thead> <tr> <th>编号</th> <th>姓名</th> <th>出生日期</th> </tr> </thead> <tfoot> <tr> <th>编号</th> <th>姓名</th> <th>出生日期</th> </tr> </tfoot> </table> </body> </html>
三十、多列搜索功能改进(使用下拉框)
上面的样例我们是通过输入框进行筛选,但手动输入文字还是有些不方便。这里做个功能改进,改成通过下拉框进行筛选。1,效果图
(1)我们在表格的 footer 上放置 3 个下拉框(每一列对应一个)。下拉框内容为该列数据的汇总(去除重复的),并按升序排列。


(3)不同列分别使用不同条件同时进行筛选也是可以的。

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery-3.1.1.js" type="text/javascript"></script> <script src="media/js/jquery.dataTables.js" type="text/javascript"></script> <link rel="stylesheet" href="media/css/jquery.dataTables.css" type="text/css" /> <script type="text/javascript"> $(document).ready(function() { $('#myTable').DataTable({ "ajax": "data.txt", initComplete: function () { //在每一列下方添加用于筛选的下拉框 this.api().columns().every( function () { var column = this; var select = $('<select><option value=""></option></select>') .appendTo( $(column.footer()).empty() ) .on( 'change', function () { var val = $.fn.dataTable.util.escapeRegex( $(this).val() ); column .search( val ? '^'+val+'$' : '', true, false ) .draw(); } ); column.data().unique().sort().each( function ( d, j ) { select.append( '<option value="'+d+'">'+d+'</option>' ) } ); }); } }); }); </script> </head> <body> <table id="myTable"> <thead> <tr> <th>编号</th> <th>姓名</th> <th>出生日期</th> <th>性别</th> <th>电话</th> </tr> </thead> <tfoot> <tr> <th>编号</th> <th>姓名</th> <th>出生日期</th> <th>性别</th> <th>电话</th> </tr> </tfoot> </table> </body> </html>