DataTables - 每列上的搜索/过滤框 (AJAX)

Question

有很多关于在每列上分离过滤器的问题。但是我没有找到关于相同问题的任何一个，但当然有一点 AJAX。

我使用数据表将近一个月了。在搜索可以添加到数据表中的很酷的东西时，我发现了一个站点，该站点具有此数据表，每列都带有过滤器。我想拥有它，但我不知道怎么弄。

我已经阅读了 Datatables 中的一些文档，但我似乎很难理解它。那么有人可以帮我解决我的问题吗？

顺便说一下，这是我的 AJAX 代码：

var initAjaxDatatables = function () {

var grid = new Datatable();

grid.init({
    src: $("#applicationTracker"),
    loadingMessage: 'Loading...',
    dataTable: {
        "bStateSave": true,

        "lengthMenu": [
            [10, 20, 50, 100, 150, -1],
            [10, 20, 50, 100, 150, "All"]
        ],
        "pageLength": 10,
        "ajax": {
            "url": root_path + "/public/ajax/report/application/LoadAllDataAsync/",
        },
        "order": [
            [1, "asc"]
        ],

        buttons: [
            { extend: 'print', className: 'btn default' },
            { extend: 'copy', className: 'btn default' },
            { extend: 'pdf', className: 'btn default' },
            { extend: 'excel', className: 'btn default' },
            { extend: 'csv', className: 'btn default' },
            {
                text: 'Reload',
                className: 'btn default',
                action: function ( e, dt, node, config ) {
                    dt.ajax.reload();
                }
            }
        ],

    }
});

// handle datatable custom tools
$('#datatable_ajax_tools > li > a.tool-action').on('click', function() {
    var action = $(this).attr('data-action');
    grid.getDataTable().button(action).trigger();
});

Answer 1

我已经为页脚中的每一列实现了过滤器，试试这个：

$(document).ready(function() {
    var data = [];
    data.push(
        [1,"Sasha","Brenna","0800 1111"],
        [2,"Sage","Mia","(01012) 405872"],
        [3,"Chelsea","Allistair","076 0578 0265"],
        [4,"Uta","Savannah","070 1247 5884"],
        [5,"Remedios","Berk","0995 181 0007"],
        [6,"Ruby","Wayne","0800 1111"],
        [7,"Faith","Fredericka","(01709) 099879"],
        [8,"Myra","Harrison","070 4241 9576"],
        [9,"Drake","Miriam","0800 733635"],
        [10,"Reed","Shannon","076 8597 5067"]
    );

    var count = 0;
    $('#data_table').DataTable( {
        data:           data,

        initComplete: function (){
            this.api().columns().every( function () {
                /*if(count == 2)
                {*/
                    var column = this;
                    var select = $('<select><option value=""></option></select>')
                        .appendTo( $(column.footer()).empty() )
                        .on( 'change', function () {
                            var val = $.fn.dataTable.util.escapeRegex(
                                $(this).val()
                            );

                            column
                                .search( val ? '^'+val+'$' : '', true, false )
                                .draw();
                        });

                    column.data().unique().sort().each( function ( d, j ) {
                        select.append( '<option value="'+d+'">'+d+'</option>' )
                    });
                /*}*/
                count++;
            });
        }
    });
});

Github Demo

Working JSFiddle