jQuery DataTable：在表頭上搜索個別列

我已按照Individual column searching (text inputs)和Individual column searching (select inputs)上的步驟在jQuery DataTable上使用多個過濾器，並且頁腳上有多個過濾器。另一方面，我想將這些過濾器移動到DataTable的頭部，但不能像下圖所示那樣水平對齊它們。有一些示例爲Custom filtering - range search，但它們並不一致。是否有可能做到這一點？jQuery DataTable：在表頭上搜索個別列

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

來源

2016-11-13 Clint Eastwood

@ Gyrocode.com由於你是DataTable的真正主人，你能幫我解決這個問題嗎？在此先感謝... –

是的，我們可以將此過濾器移到頂端... –

這裏solution您的問題，請添加必要的事情的數據表結構。

列過濾器從頁腳通過使用CSS，即只需使用

<style> 
tfoot { 
    display: table-header-group; 
} 
</style>

https://jsfiddle.net/dipakthoke07/ehhfsrfq/2/

希望這有助於你轉移到表頭。

來源

2016-11-13 09:37:05

@Clint伊斯特伍德是你的問題解決與否？ –

對不起，我正在照顧另一個問題，只是嘗試了你發佈的解決方案。搜索輸入位於標題上，但搜索參數（** sSearch **）作爲空值傳遞給Controller，同時可以通過標準搜索框傳遞。除了在標題上的任何搜索框上輸入單個字母（除了默認搜索框外）時，控制器上的方法被調用8-9次，而在默認搜索框中輸入單個字母時僅調用該方法一次。任何想法？ –

你能否看看問題出在哪裏，並澄清我該如何解決問題？感謝和投票+ –

jQuery DataTable：在表頭上搜索個別列

回答

相關問題