Question

我将此api用于DataTables：http://www.sprymedia.co.uk/dataTables/example_multi_filter.html

但是如何将搜索输入放在表格上方，“搜索所有列”？

旁边

Answer 1

您可以尝试使用CSS：

tfoot {
    display: table-header-group;
}

Answer 2

您可以为DataTables使用列过滤器附加组件。它可以配置为在标题行的下方和上方放置过滤器。请参阅网站上的http://jquery-datatables-column-filter.googlecode.com/svn/trunk/dateRange.html，http://jquery-datatables-column-filter.googlecode.com/svn/trunk/numberRange.html和其他示例。

快速更新：上面的两个网址现在无效。这是一个有效的工作：https://code.google.com/archive/p/jquery-datatables-column-filter/

Answer 3

在Jquery Datatable中将列过滤置于顶部（OR After Head）：

<script src="~/Scripts/DataTables/jquery.dataTables.columnFilter.js"></script>

表

<table class="display table table-hover table-bordered" id="usersShops"  width="100%">
    <thead>
        <tr>
            <th>Shop Name</th>
            <th>User Name</th>
            <th>Visit Date</th>
            <th>IsVisited</th>
            <th>IsAppdownloaded</th>
        </tr>
        <tr>
            <th>ShopName</th>
            <th>UserName</th>
            <th>VisitDate</th>
            <th></th>
            <th></th>
        </tr>
    </thead>        
    <tbody></tbody>
</table>

修改的列过滤器代码：

oTable.columnFilter({
                sPlaceHolder: "head:after",
                aoColumns: [{ type: "text" },
                            { type: "text" },
                            { type: "date-range" }
                ]
            });

Answer 4

我知道这是很老的帖子。但是我们可以通过对jquery代码进行以下更改来实现这一目标......

$(document).ready(function() {
$('#mytable thead td').each( function () {
        var title = $('#mytable thead th').eq( $(this).index() ).text();
        $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
});
$("#mytable thead input").on( 'keyup change', function () {
        table
            .column( $(this).parent().index()+':visible' )
            .search( this.value )
            .draw();
});
});

Jquery插件DataTables个别列过滤顶部？

4 个答案: