我正在使用jQuery DataTables插件。我正在尝试添加范围搜索:例如,所有值介于5和10之间。
我在网上找到了这个: http://www.cscc.edu/_resources/app-data/datatables/examples/plug-ins/range_filtering.html
但是,我正在寻找一种在脚本中调用它的方法,而不是一个总是在监听输入的函数。它还必须适用于多个列,例如:
table.column(0).setRange(5,10);
table.draw();
是否已有解决方案?如果没有,是否可以添加一个可以在以后调用的自定义(最好是一列)搜索过滤器?或者可能在其中调用带回调函数的搜索?
答案 0 :(得分:0)
我为它创建了一个函数,添加以下代码:
jQuery.fn.dataTable.Api.register('tb_setRange', function(column, min, max) {
var table = jQuery(this.table().node());
if (typeof(table.data('tb_ranges')) == 'undefined') {
var tb_ranges = {};
} else {
var tb_ranges = table.data('tb_ranges');
}
var columnIndex = this.column(column + ':name').index();
tb_ranges[columnIndex] = {
'min': min,
'max': max
};
table.data('tb_ranges', tb_ranges);
});
jQuery.fn.dataTable.ext.search.push(
function(settings, data, dataIndex) {
var api = new jQuery.fn.dataTable.Api(settings);
var tb_ranges = jQuery(api.table().node()).data('tb_ranges');
var result = true;
if (typeof(tb_ranges) != 'undefined') {
jQuery.each(tb_ranges, function(key, ranges) {
var value = data[key];
if (ranges.min !== null) {
if (value < ranges.min) {
return result = false;
}
}
if (ranges.max !== null) {
if (value > ranges.max) {
return result = false;
}
}
});
}
return result;
}
);
然后使用tb_setRange(columnName,min,max);并绘制()
这是一个工作示例
jQuery(document).ready(function() {
jQuery.fn.dataTable.Api.register('tb_setRange', function(column, min, max) {
var table = jQuery(this.table().node());
if (typeof(table.data('tb_ranges')) == 'undefined') {
var tb_ranges = {};
} else {
var tb_ranges = table.data('tb_ranges');
}
var columnIndex = this.column(column + ':name').index();
tb_ranges[columnIndex] = {
'min': min,
'max': max
};
table.data('tb_ranges', tb_ranges);
});
jQuery.fn.dataTable.ext.search.push(
function(settings, data, dataIndex) {
var api = new jQuery.fn.dataTable.Api(settings);
var tb_ranges = jQuery(api.table().node()).data('tb_ranges');
var result = true;
if (typeof(tb_ranges) != 'undefined') {
jQuery.each(tb_ranges, function(key, ranges) {
var value = data[key];
if (ranges.min !== null) {
if (value < ranges.min) {
return result = false;
}
}
if (ranges.max !== null) {
if (value > ranges.max) {
return result = false;
}
}
});
}
return result;
}
);
var table = jQuery('#datatable').DataTable({
'columns': [{
'name': 'name'
}, {
'name': 'age'
}, {
'name': 'number'
}]
});
table.tb_setRange('age', 14, 20);
table.tb_setRange('number', 6, 7);
table.draw();
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="//cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="//cdn.datatables.net/1.10.11/js/jquery.dataTables.js"></script>
<table id="datatable">
<thead>
<tr>
<td>name</td>
<td>age</td>
<td>number</td>
</tr>
</thead>
<tbody>
<tr>
<td>mark</td>
<td>14</td>
<td>1</td>
</tr>
<tr>
<td>joel</td>
<td>18</td>
<td>7</td>
</tr>
<tr>
<td>Ben</td>
<td>22</td>
<td>10</td>
</tr>
</tbody>
</table>
&#13;