jQuery的数据表的服务器端,与个体列的搜索,在特定柱只,

时间:2017-05-22 18:06:10

标签: jquery datatable datatables datatables-1.10

我正在尝试使用此示例实现服务器端单独列过滤,只需稍加修改

https://datatables.net/forums/discussion/31765/server-side-with-individual-column-searching-text-inputs

修改: 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中的值,这很明显,因为我一次在一列上触发事件。目前我只获得了一个触发输入事件的过滤器。 如何搜索仅通过一个请求添加到服务器的所有过滤器。例如,将搜索文本添加到所有这些特定搜索占位符并获得匹配结果。

我在论坛中探讨了大多数示例/答案,但无法使其发挥作用。有人可以帮忙吗

1 个答案:

答案 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个请求,这可能是性能错误。这里的任何人都知道如何发送一个请求。