在页脚中使用过滤器进行列搜索 - 页脚过滤器未显示 - Laravel Datatables Yajrabox

Posted

技术标签:

【中文标题】在页脚中使用过滤器进行列搜索 - 页脚过滤器未显示 - Laravel Datatables Yajrabox【英文标题】:Column search with filter in footer - footer filter not showing - Laravel Datatables Yajrabox 【发布时间】:2019-05-26 14:28:09 【问题描述】:

我正在使用 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();
            );
        );
    
);

数据表按预期显示,列和数据、排序和搜索功能位于表顶部。

但是,页脚不显示过滤器框,而过滤器框应该显示在示例中。

我不确定我错过了什么。如果有人能指出我正确的方向,那将很有帮助。

【问题讨论】:

您的 html 标记中有 tfoot 元素吗?见this example。 我拥有的 HTML 没有任何 tfoot 元素。添加解决了问题。页脚现在显示,列过滤器搜索也有效。感谢您指出。 【参考方案1】:

感谢@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>

【讨论】:

以上是关于在页脚中使用过滤器进行列搜索 - 页脚过滤器未显示 - Laravel Datatables Yajrabox的主要内容,如果未能解决你的问题,请参考以下文章

初蒙数据表。计算金额并在页脚中显示

初蒙数据表。计算金额并在页脚中显示

webform c#中的datagridview在页脚中显示查询

Laravel 4:如何在页脚中显示查询结果

如何将DataTables列过滤器置于顶部

如何将 DataTables 列过滤器放在顶部