如何将DataTables列过滤器放在顶部 [英] How to place DataTables column filter on top

问题描述

我正在使用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屋！