Datatables 在AdminLTE中使用的数据表中筛选列

我正在构建一个在后端集成了AdminLTE的Laravel应用程序。AdminLTE使用DataTables来生成表，这很好。但在AdminLTE中，只能对列进行排序，而不能过滤列。在一个管理视图中，我想用下拉列表筛选列，如图所示。 我尝试将示例代码集成到AdminLTE main.js中。但我还没有让它工作。在main.js中有一个代码片段，其中可能应该或可以集成新代码

$('.datatable').each(function () {
    if ($(this).hasClass('dt-select')) {
        window.dtDefaultOptions.select = {
            style: 'multi',
            selector: 'td:first-child'
        };

        window.dtDefaultOptions.columnDefs.push({
            orderable: false,
            className: 'select-checkbox',
            targets: 0
        });
    }
    $(this).dataTable(window.dtDefaultOptions);

});

---

有人知道如何让过滤工作吗？

必须在main.js中添加额外的代码，如下所示。在我的例子中，我将过滤器放在第二列的标题中（第一列是复选框），并将文本放在select下拉列表的第一行，以向用户提供额外信息

$('.datatable').each(function () {
        if ($(this).hasClass('dt-select')) {
            window.dtDefaultOptions.select = {
                style: 'multi',
                selector: 'td:first-child'
            };

            window.dtDefaultOptions.columnDefs.push({
                orderable: false,
                className: 'select-checkbox',
                targets: 0
            });

            window.dtDefaultOptions.initComplete = function () {
                this.api().columns('1').every( function () {
                    var column = this;
                    var select = $('<select><option value="">Filter this column</option></select>')
                        .appendTo( $(column.header()).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>' )
                    } );
                } );
            }
        }
        $(this).dataTable(window.dtDefaultOptions);

$（'.datatable'）。每个（函数（）{
if（$（this）.hasClass（'dt-select'））{
window.dtDefaultOptions.select={
风格：“多”，
选择器：“td:第一个孩子”
};
window.dtDefaultOptions.columnDefs.push({
可订购：错误，
className:“选中复选框”，
目标：0
});
window.dtDefaultOptions.initComplete=函数（）{
this.api（）.columns（'1'）.every（函数（）{
var列=此；
var select=$（“筛选此列”）
.appendTo（$（column.header（））.empty（））
.on（'change'，function（）{
var val=$.fn.dataTable.util.escapeRegex(
$（this.val（）
);
柱
.search（val？“^”+val+“$”：“”，true，false）
.draw（）；
} );
column.data（）.unique（）.sort（）.each（函数（d，j）{
选择。追加（“”+d+“”）
} );
} );
}
}
$（this）.dataTable（window.dtDefaultOptions）；