Php DataTables—每列上的搜索/筛选框（AJAX）

关于在每列上分离筛选器，有很多问题。但是我没有发现任何一个关于相同的问题，但是当然有一点AJAX

我使用datatables快一个月了。在搜索可以添加到datatable中的很酷的东西时，我发现了一个站点，它的每个列上都有一个带有过滤器的datatable。我想拥有它，但我不知道怎么做

我已经阅读了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();
});

---

我已经为页脚中的每一列实现了筛选器，请尝试以下操作：

$(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++;
            });
        }
    });
});

---

有一个问题：如果我想使用插件或库怎么办？像Select2？如何使用Select2实现过滤器？有什么想法吗？谢谢。我还没试过这个，在小提琴上试一下。是的，它起作用了！谢谢查看：编辑：刚刚添加了引导CDN：太好了：