DataTables - 每列上的搜索/过滤器框（AJAX）

Question

There's a lot of questions about separating filter on each columns. But none of them I have found about the same question, but of course with a touch of AJAX.

I'm using datatables for almost a month. While searching for a cool stuff I can add to my datatable, I found a site that has this datatable with filter on each columns. I want to have that but I can't figure it out how.

I've read some documentation in Datatables, but it seems to be difficult for me to understand it. So can someone help me to fix my problem?

By the way here's my AJAX code:

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

I have implemented the filter for each column in footer, try this:

$(document).ready(function() {
    var data = [];
    data.push(
        [1,"Sasha","Brenna","0800 1111"],
        [2,"Sage","Mia","[phone]"],
        [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","[phone]"],
        [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