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

Posted 2023-05-07

【中文标题】如何将 DataTables 列过滤器放在顶部

【英文标题】：How to place DataTables column filter on top

【发布时间】：2013-07-11 19:56:54

【问题描述】：

我正在使用 jQuery DataTables 最新版本。我想在每个表上使用单独的列过滤器，所以我使用列过滤器插件，但只在页脚中获取搜索框。我想放在页眉中

    $(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" ,

我怎样才能把它放在我的桌子上？

【参考方案1】：

方法 1 (CSS)

您可以将 CSS 更改为

tfoot 
    display: table-header-group;

方法 2 (javascript)

将过滤器行的内容作为 TD（不是 TH）放入 THEAD 并更改

$("tfoot input")

到

$("thead input")

【讨论】：

感谢您的回复，但很抱歉我没有得到第二种方法..你能简单解释一下..

您可以使用最简单的方法1。 datatables.net/release-datatables/examples/api/…会告诉你更多关于方法2的信息

CSS - 很棒的建议，简单而有效。谢谢。

@asprin - 超级棒！谢谢！

它在 chrome 和 firefox 中工作，但在 IE 中不工作..Aware！

【参考方案2】：

您可以通过添加参数 'sPlaceHolder' 将其移动到表格顶部

).columnFilter(
    sPlaceHolder: "head:after",
    aoColumns: [ ...

【参考方案3】：

只需使用以下 javascript 代码（这里的 'example' 是您的表的 id）：

$('#example tfoot tr').insertAfter($('#example thead tr'))

【参考方案4】：

在 CSS 中你可以使用

display: table-header-group; //on tfoot

和

display: table-row-group; //on thead

你会让它们像这样定位：

tfoot
thead
tbody

【讨论】：

我遇到了一个相关的问题，除了我想要“thead”在上面，“tfoot”在它下面，然后是其余的行。由于 'thead' 已经位于 html 的顶部，而 'tfoot' 紧随其后，因此在 'tfoot' 元素上设置 'display: table-row-group' 效果很好。它现在可以在 Chrome 和 IE10 上正确显示。

【参考方案5】：

试试这个

$(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();
);
);

【讨论】：

谢谢 .. 你节省了我的时间 :)

【参考方案6】：

使用sPlaceHolder 选项：

sPlaceHolder: "head:before"

例子：

dataTable.columnFilter(
  sPlaceHolder: "head:before",
  aoColumns: [
       type: "select" ,  
       type: "select" ,        
       type: "select" ,  
       type: "select" ,  
       type: "select" 
  ]
);

查看演示 -> http://jsfiddle.net/JNxj5/

【参考方案7】：

  CSS:  
 tfoot input 
    width: 100%;
    padding: 3px;
    box-sizing: border-box;

 tfoot 
display: table-header-group;

 Script:
 $(document).ready(function() 
// Setup - add a text input to each footer cell
$('#example tfoot th').each( function () 
    var title = $(this).text();
    $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
 );

// DataTable
 var table = $('#example').DataTable();

// Apply the search
 table.columns().every( function () 
    var that = this;

    $( 'input', this.footer() ).on( 'keyup change', function () 
        if ( that.search() !== this.value ) 
            that
                .search( this.value )
                .draw();
        
     );
 );

);

【讨论】：

请编辑您的答案以解释这如何解决 OP 的问题，并解释代码的作用。 SO不鼓励仅使用代码的答案。谢谢！