JQuery-Datatables-server-side-with-individual-column-searching-on-specific-columns-only答案

【问题标题】：JQuery-Datatables-server-side-with-individual-column-searching-on-specific-columns-onlyJQuery-Datatables-server-side-with-individual-column-searching-on-specific-columns-only
【发布时间】：2017-10-22 11:53: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 中的值，这很明显，因为我一次触发一列上的事件。目前我只得到一个触发输入事件的过滤器。如何搜索仅由一个请求添加到服务器的所有过滤器。例如，将搜索文本添加到所有这些特定搜索占位符并获得匹配结果。

我已经探索了论坛中的大多数示例/答案，但无法使其正常工作。有人可以帮忙吗

【问题讨论】：

标签： jquery datatable datatables datatables-1.10

【解决方案1】：

我想通了。想法是搜索所有必需的列并最终在表格上点击绘制。下面是我的代码。

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 个对服务器的请求，这可能是一个性能错误。这里的任何人都知道如何只发送一个请求。

【讨论】：