如何使用 jQuery DataTables 过滤某些列
Posted
技术标签:
【中文标题】如何使用 jQuery DataTables 过滤某些列【英文标题】：How to use jQuery DataTables to filter certain columns 【发布时间】：2020-08-31 13:34:53 【问题描述】：我正在使用Datatables plugin，它会自动允许对所有列进行列过滤。有没有办法让我在我的html tables 的第 2 到第 6 列上严格 filtering 我试图遵循这个 jQuery DataTables Filtering for Specific Columns Only 但它对我不起作用。
这是我的工作代码
<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>
【问题讨论】：
【参考方案1】：试试这个链接！我认为您必须将 ids 的值传递给 js 文件，然后在 datatables 过滤器选项中使用这些 ids link
【讨论】：
【参考方案2】：对表格中的每个 th 进行列过滤。
如果您想删除过滤器，您可以应用以下解决方案之一。1.您可以将不需要过滤器的列更改为 td 2. 向不需要过滤器的列添加一个类。此类将被添加到 th 因为过滤器应用于它们。我为这个例子添加了一个 sn-p。我在列中添加了我不想过滤（开始日期）类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 过滤某些列的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 jQuery DataTables 插件过滤带有特殊字符的结果？