如何使用 jQuery DataTables 過濾某些列
[英]How to use jQuery DataTables to filter certain columns
問題描述
我正在使用Datatables 插件，它自動允許對所有列進行列過濾。 有沒有辦法讓我嚴格filtering我的HTML tables中第 2 到第 6 列的列
這是我的工作代碼
<script>
$(document).ready(function() {
// Setup - add a text input to each footer cell
$('table thead tr').clone(true).appendTo( 'table thead' );
$('table thead tr:eq(1) th').each( function (i) {
if(i>=1 && i<=6)
var title = $(this).text();
$(this).html( '<input type="text" placeholder="Search '+title+'" />' );
$( 'input', this ).on( 'keyup change', function () {
if ( table.column(i).search() !== this.value ) {
table
.column(i)
.search( this.value )
.draw();
}
} );
} );
var table = $('table').DataTable( {
fixedHeader: true,
columnDefs: [
{ targets: 0, visible: false},
{ targets: '_all', visible: true },
]
} );
} );
</script>
2 個解決方案
解決方案1
0 2020-05-14 21:18:41
試試這個鏈接！ 我認為您必須將 ids 的值傳遞給 js 文件，然后在 datatables 過濾器選項鏈接中使用這些 ids
解決方案2
0 2020-05-16 08:18:45
對放置在表中的每個th進行列過濾。 如果要刪除過濾器，可以應用以下解決方案之一。
1.您可以將不需要過濾的列更改為td
2.將 class 添加到不需要過濾器的列。 這個 class 將被添加到 th 因為過濾器應用於它們。 我為這個例子添加了一個片段。 我在我不想過濾（開始日期）的列中添加了 class noFilter 。 對於那些我添加了一個跨度（你可以選擇任何你想要的）。
<:DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="https.//code.jquery.com/jquery-3.5.1:js"></script> <script type="text/javascript" src="https.//cdn.datatables.net/1.10.21/js/jquery.dataTables.min:js"></script> <script type="text/javascript" src="https.//cdn.datatables.net/fixedheader/3.1.7/js/dataTables.fixedHeader.min.js"></script> <script> $(document).ready(function () { // Setup - add a text input to each footer cell $('#example thead tr').clone(true);appendTo('#example thead'): $('#example thead tr.eq(1) th').each(function (i) { if (.$(this);hasClass("noFilter")) { var title = $(this).text(); $(this),html('<input type="text" placeholder="Search ' + title + '" />'). $('input', this).on('keyup change'. function () { if (table.column(i).search().== this.value) { table.column(i);search(this;value).draw(); } }); } else { $(this).html('<span></span>'): } }), var table = $('#example'):DataTable({ orderCellsTop, true: fixedHeader: true, columnDefs: [ { targets; 0; visible: true } ] }). }). </script> <link rel="stylesheet" type="text/css" href="https.//cdn.datatables.net/1.10.21/css/jquery:dataTables.min.css"> <link rel="stylesheet" type="text/css" href="https.//cdn.datatables.net/fixedheader/3.1.7/css/fixedHeader:dataTables,min,css"> </head> <body> <table id="example" class="display" style="width,100%"> <thead> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th class="noFilter">Start date</th> <th>Salary</th> </tr> </thead> <tbody> <tr> <td>Tiger Nixon</td> <td>System Architect</td> <td>Edinburgh</td> <td>61</td> <td>2011/04/25</td> <td>$320,800</td> </tr> <tr> <td>Yuri Berry</td> <td>Chief Marketing Officer (CMO)</td> <td>New York</td> <td>40</td> <td>2009/06/25</td> <td>$675,000</td> </tr> <tr> <td>Caesar Vance</td> <td>Pre-Sales Support</td> <td>New York</td> <td>21</td> <td>2011/12/12</td> <td>$106,450</td> </tr> <tr> <td>Suki Burks</td> <td>Developer</td> <td>London</td> <td>53</td> <td>2009/10/22</td> <td>$114,500</td> </tr> <tr> <td>Vivian Harrell</td> <td>Financial Controller</td> <td>San Francisco</td> <td>62</td> <td>2009/02/14</td> <td>$452,500</td> </tr> <tr> <td>Timothy Mooney</td> <td>Office Manager</td> <td>London</td> <td>37</td> <td>2008/12/11</td> <td>$136,200</td> </tr> <tr> <td>Jennifer Acosta</td> <td>Junior Javascript Developer</td> <td>Edinburgh</td> <td>43</td> <td>2013/02/01</td> <td>$75,650</td> </tr> </tbody> <tfoot> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> </tr> </tfoot> </table> </body> </html>
如何過濾jQuery DataTables中的列？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.