我正在尝试使用此示例实现服务器端单独列过滤,只需稍加修改
修改: 1.在页眉上方添加页脚 2.仅为特定列添加列过滤器 3.在Enter keyCode上触发事件
$('#myDataTable tfoot th').filter(':eq(2),:eq(4),:eq(6),:eq(8),:eq(10)').each( function () {
var title = $('#myDataTable thead th').eq( $(this).index() ).text();
$(this).html( '<input type="text" placeholder="Search '+title+'" id ="filter'+$(this).index()+'"/>' );
} );
$('#myDataTable tfoot tr').insertBefore($('#myDataTable thead tr'))
var table = $('#myDataTable').Datatable({
....
})
table.columns(2,4,6,8,10).every( function () {
var that = this;
$( 'input', this.footer() ).on( 'keyup change', function (e) {
if ( that.search() != this.value && e.keyCode == 13) {
that.search( this.value ).draw();
}
} );
} );
在MVCController中,我正在捕捉这些分页/搜索过滤器,如下所示
@RequestParam(value = "draw", required = false) Integer draw,
@RequestParam(value = "order[0][column]", required = false) final Integer sortColumn,
@RequestParam(value = "order[0][dir]", required = false) final String sortOrder,
@RequestParam(value = "start", required = false) Integer start,
@RequestParam(value = "length", required = false) Integer length,
@RequestParam(value = "columns[2][search][value]", required = false) String col2search,
@RequestParam(value = "columns[4][search][value]", required = false) String col4search,
@RequestParam(value = "columns[6][search][value]", required = false) String col6search,
@RequestParam(value = "columns[8][search][value]", required = false) String col8search,
@RequestParam(value = "columns[10][search][value]", required = false) String col10search
这里的问题是我只获得col2search中的值,这很明显,因为我一次在一列上触发事件。目前我只获得了一个触发输入事件的过滤器。 如何搜索仅通过一个请求添加到服务器的所有过滤器。例如,将搜索文本添加到所有这些特定搜索占位符并获得匹配结果。
我在论坛中探讨了大多数示例/答案,但无法使其发挥作用。有人可以帮忙吗
答案 0 :(得分:0)
我明白了。想法是搜索所有必需的列并最终在表格上绘制。以下是我的代码。
var filterColumns = [2, 6, 8, 10];
table.columns(filterColumns).every(function () {
var that = this;
$('input', this.footer()).on('keypress', function (e) {
if (that.search() != this.value && e.keyCode == 13) {
filterColumns.map(function (key, value) {
table = table.column(key).search($("#filter" + key).val());
})
table.draw();
}
});
});
确实存在一个性能问题。由于我在页脚中有4个输入,它会向服务器生成5个请求,这可能是性能错误。这里的任何人都知道如何发送一个请求。