angular 數據表中的頂部而不是底部的單個列搜索

Question

I am using this library https://l-lin.github.io/angular-datatables/#/welcome for my angular 7 project I have implemented the code as given the the example as it is, https://l-lin .github.io/angular-datatables/#/advanced/individual-column-filtering 。

它工作得很好，但唯一的問題是搜索列的 position，我想要 header 中的搜索列在列名之后，我嘗試將tfoot轉換為thead但它不起作用。

我發現了一些示例，例如http://live.datatables.net/cutucahi/1/edit ，但示例是用我不想要的搜索框替換 header 列

Answer 1

試試下面的例子

 initComplete: function () { var r = $('#MyDataTable tfoot tr'); r.find('th').each(function(){ $(this).css('padding', 8); }); $('#MyDataTable thead').append(r); $('#search_0').css('text-align', 'center'); },

如果不檢查以下鏈接中的解決方案

https://datatables.net/examples/api/multi_filter.html——在評論部分。 給出了多種解決方案。

Answer 2

內表 header html 這樣做

   <thead>
      <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</th>
      </tr>
      <tr id="test">
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</th>
      </tr> 
    </thead>

如果您注意到我又添加了一個tr並創建了相同的標題

在此之后在 js 文件中更改元素選擇器

$('#example thead th').each( function () {
    var title = $(this).text();
    $(this).html( '<input type="text" placeholder='+title+' />' );
} );

至

$('#example thead #test th').each( function () {
    var title = $(this).text();
    $(this).html( '<input type="text" placeholder='+title+' />' );
} );

這將解決您的問題。

請檢查鏈接我不確定它是否正確加載

核實

Answer 3

為了分別獲得所有列名下方的所有input[type=text] （搜索框），您必須將其append更改為各自的 tr 將您的 js 更改為

$(document).ready(function() {
    // Setup - add a text input to each footer cell
    $('#example thead th').each( function () {
        var title = $(this).text();
        $(this).append( '<br><input type="text" placeholder='+title+' />' );
    } );

    // DataTable
    var table = $('#example').DataTable({
      scrollX: true
    });

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

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

單擊此處查看工作示例