Фильтрация столбцов в таблицах данных как используется в AdminLTE - PullRequest
Новая
       11

Фильтрация столбцов в таблицах данных как используется в AdminLTE

0 голосов
/ 17 января 2019

Я создаю приложение Laravel с интегрированной в бэкэнд AdminLTE. AdminLTE использует DataTables для генерации таблиц, это прекрасно работает. Но в AdminLTE можно только сортировать столбцы, а фильтровать столбцы невозможно. В одном представлении администратора я хочу отфильтровать столбцы с раскрывающимся списком, как показано в этом примере DataTables . Я пытался интегрировать пример кода в 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);

});

У кого-нибудь есть идеи, как заставить работать фильтрацию?

1 Ответ

0 голосов
/ 22 января 2019

Дополнительный код должен быть добавлен в 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
            });

            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);
...