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>
