Jquery plugins Jquery插件DataTables单个列过滤在顶部？

我将此api用于数据表：

---

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

您可以尝试使用CSS：

tfoot {
    display: table-header-group;
}

---

您可以对数据表使用列筛选器附加组件。它可以配置为在标题行的下方和上方放置过滤器。请参阅，以及网站上的其他示例

---

快速更新：上面的两个URL现在无效。这里有一个有用的帖子：

我知道这是一个很老的帖子。但我们可以通过对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();
});
});

$（文档）.ready（函数（）{
$（'#mytable thead td'）。每个（函数（）{
var title=$（'#mytable thead th'）.eq（$（this.index（））.text（）；
$（this.html（“”）；
});
$（“#mytable thead input”）。打开（'keyup change'，函数（）{
桌子
.column（$（this）.parent（）.index（）+'：visible'）
.search（this.value）
.draw（）；
});
});

将列筛选放在Jquery数据表的顶部（或后面）：

<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" }
                ]
            });