使用datatables中的列表筛选功能

使用datatables中的列表筛选功能

datatables是一个非常棒的jquery插件，该插件可以提供一个互动度很高的网页表格，官网 https://datatables.net/ 同时也有中文的一个官网 http://www.datatables.club/ 而搜索功能是该网络表格的核心功能之一，这里我将介绍该表格如何进行筛选。

使用search() API对列进行搜索

datatables提供了一个search()的API接口可以用来对某一列的内容进行筛选，筛选的方式如下：

var table = $('#table_example').DataTable();
$('#column3_search').on('keyup' function(){
	table
		.columns(3)
		.search($(this).val())
		.draw();
})

可以看到，我们先通过columns()来提取第3列的值，然后通过search() API来查找指定的值，然后通过draw()方法来使得表格仅显示搜索到的结果。
keyup事件是按键事件，当我们按下键盘的时候就会触发
如果我们想要对搜索的内容进行设置，就需要知道search() API的一些参数，如下：

Name	Type	Option	Explaination
input	string	No	搜索内容
regex	boolean	Yes-default:false	将输入内容看作正则表达式
smart	boolean	Yes-default:true	内容见下面
caseInsen	boolean	Yes-default:true	是否忽略大小写

smart的筛选方式如下：

• 忽略筛选元素顺序
• 部分匹配
• 双引号保持文本完全匹配
  smart模式在使用正则匹配的时候，需要设置为false，可能会引起正则表达式冲突

使用$.fn.dataTable.ext.search.push()自定义筛选

这个方法我们直接在里面定义方法就可以了，该方法将在循环列表的每一列内容时应用，当函数返回true的时候显示，false的时候隐藏。下面是一个例子：

$.fn.dataTable.ext.search.push(
function(settings,searchData,index,RowData,counter){
col4_data = parseFloat(searchData[3]);
max = $('#max').val()；
min = $('#min').val();
if((isNaN(max)&&isNaN(min))||
	(isNaN(max)&&col4_data>min)||
	(col4_data<max&&isNaN(min))||
	(min<col4_data<max)) {
	return true;}
return false;
});

使用table.draw()方法来触发筛选

上面的一个例子是一个标准的区间筛选(range filter)的例子，这里有一个问题在于，通过上述的一个筛选，我们其实还不能得到筛选结果，需要通过table.draw()方法来触发。
也就是说，我们先通过$.fn.dataTable.ext.search.push()方法来规定每一行的筛选规则，然后再通过table.draw()方法来实施该方法。
这里回调函数function的参数中，searchData和RowData是有一些不同的，searchData仅返回表格中的文本，而RowData返回的则是td标签的内容，也就是返回的其实是html的内容，例如我们如果给某一列内容添加了a标签，那么RowData的返回结果就带有a标签，而searchData则不会。

使用$.fn.dataTable.ext.search.pop()弹出方法

最后一个需要注意的问题是，当我们要不断的更换$.fn.dataTable.ext.search.push()中的方法的时候，需要在上一次筛选结束后使用$.fn.dataTable.ext.search.pop()弹出之前的搜索方法。如果不这么做的话，那么筛选方法将一直是第一次设定的筛选方法，不会更新。