datatable筛选条件_DataTables-多条件查询多列搜索
datatable筛选条件_DataTables 多条件查询、多列搜索
在使用DataTables展示数据，通常有两种
根据条件获取最终的数据显示
在已经显示的数据中过滤
第二种，DataTables 本身提供了过滤插件，默认条件下，在表格的右上角会有一个搜索框，可以对表格中的数据进行过滤，这个是针对全局(所有列)的搜索
如果你想排除某列不参与搜索只需要按下面的配置：
1
2
3
4
5
6
7
8
9var table = $("#example").DataTable({
“columnDefs”:[
{
//设置第一列不参与搜索
“targets”:[0],
“searchable”:false
}
]
});
ps：第一列是索引列，那我们是不希望他被搜索到，因为没有意义，所以我们设置第一列不参与搜索，注意这里是不参与，只是说针对于全局搜索时，
会把这个值排除在外再搜索，并不是这一列禁用了搜索，我们依然可以使用
column().search()API
方法，具体往下看
当然如果你不想用这个全局搜索，你还可以关掉他，毕竟他是keyup事件，对于有些情况来说不是那么好用
1
2
3
4var table = $("#example").DataTable({
//关闭DT的本地搜索
“searching”: false
});
但是这样做会影响到 DT 提供的搜索API -
search()API
方法,实际上DT自带的搜索框也是调用了这个方法，
“searching”: false相当于把搜索功能关闭了，
search()API
就不能用了，这样当然不行，
所以如果你想用自己的搜索框，那么建议你设置 dom 来把默认的搜索框隐藏(详见 DataTables 之 DOM)
我们可以自己写一个或者多个input框，点击按钮触发这个方法，这个方法接收的值用空格隔开，就类似于多条件搜索
ps：你还可以传正则表达式 参考 正则表达式搜索
1
2
3
4
5
6
7
8
9//给搜索按钮绑定点击事件
$(document).on(“click”,"#example button.search",function(){
//自己定义的搜索框，可以是时间控件，或者checkbox 等等
var args1 = $("#input1").val();
var args2 = $("#input2").val();
//用空格隔开，达到多条件搜索的效果，相当于两个关键字
table.search(args1+""+args2).draw();
//table.search(args1+" “+args2).draw(false);//保留分页，排序状态
});
例子中代码看起来可能有点难理解，不要紧，我把关键代码拿出来，如下：
1
2
3
4table
.column( colIdx )
.search( this.value )
.draw();
colIdx 表示第几列，这里可以接受单个的数字，0,1,2,3 或者是一个数组 [0,1,2,3]
this.value 表示搜索条件，可以支持正则，不过我实践后发现，使用了 column 后，就不能用空格隔开条件查询
如果要针对单个的或者多列去处理，比如第二列搜索条件为 keith，第三列搜索条件为 男：
1
2
3
4
5
6table
.column(3)
.search(“keith”)
.column(4)
.search(“男”)
.draw();
当然大家还可以自己实践，对代码进行优化，DT 1.10版之后支持链式写法，可以一直点下去
column().search()API
这个方法他不能得到按条件搜索过后的最终结果，
如果你想获取搜索后的数据集，需要使用
filter()API
1
2
3
4
5
6
7
8var table = $(’#example’).DataTable();
var filteredData = table
.column( 2 )
.data()
.filter( function ( value, index ) {
return value == ‘keith’ ? true : false;
} );
这里大家或许强迫症就犯了，TMD要弄两次才能获取到数据，第一次为了显示，第二次为了获取到数据，哈哈哈，我也是这么认为的，为什么呢？
我想作者应该是考虑了的，这样做肯定有他的道理，我们这么普通的人都想得到的，作者这么聪明的不会想不到呢？
总的来说
column().search()API
配合全局的搜索，应该是能满足绝大部分的需求，好好发挥
自己的想象力吧
最后总结：
“searching”: false 这样配置了，DT的搜索功能关闭，相关的方法也失效(服务器模式下不影响)
搜索功能开启的前提下，全局搜索时可以配置某列不参与搜索
你还可以使用
column().search()API
方法匹配的具体某列进行过滤搜索
如果你想获取搜索后的结果集，你得需要使用
filter()API
方法
2016年7月2日补充：
小伙伴 Smail 提供如下代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26//扩展DT的默认配置
$.extend($.fn.dataTable.defaults, {
//在 dom 里面不配置 f ，可以隐藏掉默认的搜索框
dom: ’tp’,
//DT初始化完毕回调函数
initComplete: function(settings) {
var _$this = this;
var searchHTML = ‘搜索: ‘;
//快捷操作的HTML DOM
$(_$this.selector + ‘_wrapper .dataTables_filter’).append(searchHTML);
//重写搜索事件
$(_$this.selector + ‘_wrapper .dataTables_filter input’).bind(‘keyup’,
function(e) {
if (e.keyCode == 13 || (e.keyCode == 8 && (this.value.length == 0))) {
_$this.api().search(this.value).draw();
}
});
}
});
//初始化DT
var t = $(’#example’).DataTable({
//……
//自己需要的其他属性
});
重写datatables搜索事件，这样就能做到按下回车时搜索了，还不破坏 DataTables 原有的样式结构。
2016年10月31日补充：
Smail小伙伴提供如下代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100$.extend($.fn.dataTable.defaults, {
dom: ’tp’,
language: {
“url”: “../assets/lib/datatables/datatables_language.json”
},
processing: true, //当datatable获取数据时候是否显示正在处理提示信息。
serverSide: true, //处理分页
responsive: {
details: false
},
initComplete: function(settings) {
var _$this = this;
/**
- 重写搜索事件
*/
$(’#doSearch’).bind(‘click’, function(e) {
_$this.api().ajax.reload();
});
$(’#search’).bind(‘keyup’, function(e) {
if(e.keyCode == 13 || (e.keyCode == 8 && (this.value.length == 0))) {
_$this.api().ajax.reload();
}
});
},
drawCallback: drawCallbackDefault
});
/**
DT绘制完成回调
单独写出来是方便二次定制
默认回调函数功能：
1.DT第一列checkbox初始化从icheck
2.iCheck全选、取消多选、多选与单选双向关联
3.选中的tr加上selected class
@param {Object} settings
*/
function drawCallbackDefault(settings, _$this) {
console.log(‘drawCallbackDefault’);
$this = (isExitsVariable(’$this’) && _$this) ? _$this : this;
selector = _$this.selector;
$(selector + ‘input’).iCheck({
checkboxClass: ‘icheckbox_minimal’,
increaseArea: ‘20%’
});
/**
- DT thead iCheck 点击事件
*/
$(selector + ‘input[name=all]’).on(‘ifChecked ifUnchecked’, function(e) {
$(this).closest(’table’).find(‘input[name=single]’).each(function() {
if(e.type == ‘ifChecked’) {
$(this).iCheck(‘check’);
$(this).closest(’tr’).addClass(‘selected’);
} else {
$(this).iCheck(‘uncheck’);
$(this).closest(’tr’).removeClass(‘selected’);
}
});
});
/**
- DT tbody iCheck点击事件
*/
$(selector + ‘input[name=single]’).on(‘ifChecked ifUnchecked’, function(e) {
if(e.type == ‘ifChecked’) {
$(this).iCheck(‘check’);
$(this).closest(’tr’).addClass(‘selected’);
//全选单选框的状态处理
var selected = _$this.api().rows(’.selected’).data().length; //被选中的行数
var recordsDisplay = _$this.api().page.info().recordsDisplay; //搜索条件过滤后的总行数
var iDisplayStart = _$this.api().page.info().start; // 起始行数
if(selected === _$this.api().page.len() || selected === recordsDisplay || selected === (recordsDisplay - iDisplayStart)) {
$(selector + ‘input[name=all]’).iCheck(‘check’);
}
} else {
$(this).iCheck(‘uncheck’);
$(this).closest(’tr’).removeClass(‘selected’);
$(selector + ‘input[name=all]’).attr(‘checked’, false);
$(selector + ‘input[name=all]’).iCheck(‘update’);
}
});
/**
检测参数是否定义
@param {Object} variableName
*/
function isExitsVariable(variableName) {
try {
if(typeof(variableName) == “undefined”) {
return false;
} else {
return true;
}
} catch(e) {}
return false;
}
}
使用方式：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
标题栏目排序创建时间作者状态操作
$(function($) {
var datatable = $(’.table-sort’).DataTable({
columns: [{
data: “id”,
render: function(data, type, row, meta) {
return ‘'+
‘’;
}
}],
drawCallback:function(settings){
var _$this = this;
drawCallbackDefault(settings,_$this);
console.log(‘用户二次定义！’);
}
});
});
如上代码：
若不声明drawCallback，DT会调用drawCallbackDefault，控制台会打印出drawCallbackDefault，
若声明drawCallback，并在drawCallback中调用默认回调，控制台会打印出drawCallbackDefault和用户二次定义 两句log，
也允许完全覆盖drawCallback重写。
注意，Smail提供的代码依赖JS iCheck组件，使用的小伙伴们记得自行引入icheck。