Поиск столбца с фильтром в нижнем колонтитуле - фильтр нижнего колонтитула не отображается - Laravel Datatables Yajrabox - PullRequest
Новая
       10

Поиск столбца с фильтром в нижнем колонтитуле - фильтр нижнего колонтитула не отображается - Laravel Datatables Yajrabox

0 голосов
/ 28 декабря 2018

Я использую таблицы данных Yajrabox Laravel для отображения данных.Очень просто, просто пробую то, что дано в уроке.Однако текстовые поля для ввода в нижний колонтитул таблицы не отображаются.

https://datatables.yajrabox.com/eloquent/multi-filter-select

Используя тот же код, который есть на странице - исходный код.

$('#users-table').DataTable({
    processing: true,
    serverSide: true,
    ajax: 'https://datatables.yajrabox.com/eloquent/multi-filter-select-data',
    columns: [
        {data: 'id', name: 'id'},
        {data: 'name', name: 'name'},
        {data: 'email', name: 'email'},
        {data: 'created_at', name: 'created_at'},
        {data: 'updated_at', name: 'updated_at'}
    ],
    initComplete: function () {
        this.api().columns().every(function () {
            var column = this;
            var input = document.createElement("input");
            $(input).appendTo($(column.footer()).empty())
            .on('change', function () {
                column.search($(this).val(), false, false, true).draw();
            });
        });
    }
});

Таблица данных показывает, как и ожидалось, со столбцами и данными, сортировкой и функцией поиска в верхней части таблицы.

Однако в нижнем колонтитуле не отображается поле фильтра, в то время как поле фильтра должно отображаться, как показано в примере.

Я не уверен, что мне не хватает.Если кто-то может указать мне правильное направление, это будет полезно.

1 Ответ

0 голосов
/ 29 декабря 2018

Спасибо @Gyrocode за указание на tfoot.В моей таблице не было элемента.Я должен был добавить это, и затем нижний колонтитул начал обнаруживаться с фильтром столбца.

Пример кода приведен здесь для всех, у кого может быть похожая проблема.

<table id="users-table" class="table table-condensed">
<thead>
    <tr>
        <th>Id</th>
        <th>Name</th>
        <th>Email</th>
        <th>Created At</th>
        <th>Updated At</th>
    </tr>
</thead>
<tfoot>
    <tr>
        <th>Id</th>
        <th>Name</th>
        <th>Email</th>
        <th>Created At</th>
        <th>Updated At</th>
    </tr>
</tfoot>

...