Question

我已经看到了如何使用文本框或包含每列返回值的下拉菜单为DataTable的每一列应用单个列搜索的示例。但是，我还没有遇到任何仅将其应用于特定列的机制。例如，使用以下内容会将搜索文本框应用于除coloumn零之外的所有内容：

$('#DataTable tfoot th:gt(0)').each(function () {
    var title = $(this).text();
    $(this).html('<input type="text" 
    style="width:120px;"  placeholder="search ' + title + '" />');
});

但是，我怎样才能将它从第6栏和第6栏中删除7例如？

*更新* 此问题仅与服务器端处理有关。应该早些说明。

Answer 1

我个人使用列定义与iniComplete callBack结合使用。在这个例子中有两种类型的搜索，你可以添加尽可能多的不同搜索（甚至没有搜索）

$('#table').DataTable({
            "ajax": {
                "url": "/flux/ajax",
                "dataSrc": "data",
                "scrollX": true
            },
            "columns": [                    
                {className: "select", "title": "Status", "data": "stat"}
                {className: "text", "title": "Libellé", "data": "Lib"}}
            ],
            initComplete: function () {

                this.api().columns().every(function () {
                    var column = this;
                    if ($(column.header()).hasClass('select')) {
                        console.log(column);
                        var select = $('<select><option value="">' + $(column.header()).html() + '</option></select>')
                                .appendTo($(column.header()).empty())
                                .on('change', function (e) {
                                    e.stopImmediatePropagation();
                                    var val = $.fn.dataTable.util.escapeRegex(
                                            $(this).val()
                                            );
                                    column
                                            .search(val ? '^' + val + '$' : '', true, false)
                                            .draw();
                                    return false;
                                });
                        column.data().unique().sort().each(function (d, j) {
                            select.append('<option value="' + d + '">' + d + '</option>');
                        });
                    } else if ($(column.header()).hasClass('text')) {
                        var text = $('<input type="text" placeholder="' + $(column.header()).html() + '" />')
                                .appendTo($(column.header()).empty())
                                .on('keyup change', function () {
                                    var val = $.fn.dataTable.util.escapeRegex(
                                        $(this).val()
                                        );
                                    if (column.search() !== this.value) {
                                        column
                                                .search(val)
                                                .draw();
                                    }
                                    return false;
                                });

                    }

                });
            }
        });

Answer 2

您可以使用类似的内容（按标题）

    $('#DataTable tfoot th:gt(0)').each(function () {
        var title = $(this).text();
        if (title != "columns 6 title" && title != "columns 7 title")
        {
            $(this).html('<input type="text" 
            style = "width:120px;"  placeholder = "search ' + title + '" /> ');
        }
    });

针对特定列的单个列搜索，DataTable

2 个答案: