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

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

1 个答案: