如何将 DataTables 列过滤器放在顶部 [英] How to place DataTables column filter on top
本文介绍了如何将 DataTables 列过滤器放在顶部的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我使用的是 jQuery DataTables 最新版本.我想在每个表上使用单独的列过滤器,所以我使用列过滤器插件,但只在页脚中获取搜索框.我想放在标题中
I am using jQuery DataTables latest version. I want to use individual column filter on every table so am using the column filter plugin but am getting search boxes in footer only. I want to place in the header
$(document).ready(function () {
var oTable=$("#example").dataTable({
"bJQueryUI": true,
"sScrollX": "100%",
"aLengthMenu": [[5, 15, 50, 100], [5, 15, 50, "l00"]],
"iDisplayLength": 10,
"sPaginationType": "full_numbers",
"sDom": '<"top"if>rt<"bottom"lp><"clear">'
}).columnFilter({"sPlaceHolder":"head :before",
"aoColumns": [{ "type": "text" }, { "type": "text" }, null, null, null, null, { "type": "text" }, null, { "type": "text" }, { "type": "text" }, { "type": "text" },
我怎样才能把它放在桌子的顶部?
How can I place it on the top of my table?
推荐答案
方法 1 (CSS)
您可以将 CSS 更改为
Method 1 (CSS)
You could change the CSS to
tfoot {
display: table-header-group;
}
方法 2 (Javascript)
将过滤器行的内容作为 TD(而不是 TH)放入 THEAD 并更改
Method 2 (Javascript)
Put the filter row stuff into the THEAD as TDs (not THs) and change
$("tfoot input")
到
$("thead input")
这篇关于如何将 DataTables 列过滤器放在顶部的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文