如何在过滤数据表jQuery中制作多个条件
Posted
技术标签:
【中文标题】如何在过滤数据表jQuery中制作多个条件【英文标题】:How to make multiple conditions inside filter datatable jQuery 【发布时间】:2021-11-21 06:04:34 【问题描述】:我使用数据表库,但我遇到了问题。在我的页面中,我有过滤菜单,它根据表头值生成过滤值。
当页面开始时,我过滤数据,只显示活动值,如果用户想看到不活动的,他可以按:
用户将看到所有值,但如果我进入主过滤器:
并选择一些值,并尝试使所有值处于活动状态或非活动状态过滤不起作用。我该如何解决这个问题?
我的过滤代码:
function drawTable(table, className, lenth)
$.fn.dataTable.ext.search.push(
function (settings, data, dataIndex)
return $(table.row(dataIndex).node()).find(className).length == lenth;
);
table.draw();
$(document).ready(function ()
var table = $('#' + tableId + '').DataTable();
if ($(".fa").hasClass("fa-eye"))
drawTable(table, '.fa-inactive, .fa-invisible-data', 0);
$(".fa-eye-slash").click(function ()
$(".fa-visibles").removeClass('hide');
$(".fa-invisibles").addClass('hide');
$.fn.dataTable.ext.search.pop();
table.draw();
);
$(".fa-eye").click(function ()
$(".fa-visibles").addClass('hide');
$(".fa-invisibles").removeClass('hide');
drawTable(table, '.fa-inactive, .fa-invisible-data', 0);
);
);
JSFIDDLE
当你点击过滤图标时,选择例如“Office -> Regional Director”,在表 3 值上,但只显示两个,我想取消此过滤器并点击 眼睛,但这不起作用。
【问题讨论】:
你之前不是问过这个吗? @CarstenLøvboAndersen 不幸的是:( 这可能不是您想要做的,但我会考虑通过使“状态”列有自己的搜索窗格来改变方法,而不是使用眼睛图标来控制那部分过滤。这样,所有数据都以标准方式过滤(使用搜索窗格)。您可以 (a) 在表格首次显示时预先填充“状态”搜索窗格,以匹配您的演示当前所做的; (b) 使用列渲染器来显示检查和交叉,但如果您愿意,可以过滤“活动”/“非活动”等词。 或者,您是否考虑过用search builder 替换整个方法? @andrewJames 你能举个例子吗? 【参考方案1】:根据您的代码JSFiddle,您的所有代码都可以正常工作。多个条件不起作用,因为您的逻辑错误。
让我解释一下。
活动和非活动条件正在处理当前表的数据。
首先,表的数据包含所有数据(活动和非活动)。你可以 像“办公室->区域总监”这样的过滤器,你可以找到3 记录。然后您可以单击活动和非活动条件事件。 它将正常工作。
其次,你隐藏了一些不活跃的数据 表,它在你的表中只有活动数据。然后,你过滤 比如“办公室 -> 区域总监”。你只能找到2条记录, 无法显示非活动记录,因为当前表的数据没有 非活动数据。
解决方案:
在调用过滤函数时你应该调整你的代码,你必须先重新加载所有表数据,然后你才能调用过滤过程与所有数据。 完成过滤数据后,必须检查活动或非活动条件。示例代码,基于您提供的代码。希望你能理解。
let tableId = "example";
$('.filtering-system').hide();
$('.button-container').hide();
addSpliting('');
function showAllVaues()
$('#' + tableId + '').dataTable().api().pagae.len(-1).draw();
function addSpliting(val, length)
if (val != '')
//start Reload- Before Filter event, need to reload all data
var table = $('#' + tableId + '').DataTable();
$.fn.dataTable.ext.search.pop();
table.draw();
//end Reload
$('#' + tableId + '').DataTable(
destroy: true,
searchPanes:
layout: 'columns-' + length + ''
,
columnDefs: [
searchPanes:
show: true
,
targets: '_all'
],
dom: 'Pfrtip'
);
$('.dtsp-searchPanes').children().each(function (i, obj)
if (!val.includes(i)) $(this).hide();
else $(this).show();
);
//start check - When get filter data, need to check active or not
if ($(".fa").hasClass("fa-eye"))
drawTable(table, '.fa-inactive, .fa-invisible-data', 0);
//end check
else
$('#' + tableId + '').DataTable(
destroy: true
);
function setFilters()
$("table thead tr th").each(function (index)
var boxes = `<label>
<input type="checkbox" class="custom-checkbox" id="$index"/>
$$(this).text()
</label>`;
if ($(this).text() != "" && $(this).hasClass('checkbox-mark') === false) $(".checkBoxes").append(boxes);
);
setFilters();
$("#createFilter").on("click", function ()
var columFilters = [];
$('.custom-checkbox:checked').each(function ()
columFilters.push(parseInt($(this).attr('id')));
);
addSpliting(columFilters, columFilters.length);
);
$("#fil-sys").on("click", function ()
$('.filtering-system').slideToggle('slow');
);
function drawTable(table, className, lenth)
$.fn.dataTable.ext.search.push(
function (settings, data, dataIndex)
return $(table.row(dataIndex).node()).find(className).length == lenth;
);
table.draw();
$(document).ready(function ()
var table = $('#' + tableId + '').DataTable();
if ($(".fa").hasClass("fa-eye"))
drawTable(table, '.fa-inactive, .fa-invisible-data', 0);
$(".fa-eye-slash").click(function ()
$(".fa-visibles").removeClass('hide');
$(".fa-invisibles").addClass('hide');
$.fn.dataTable.ext.search.pop();
table.draw();
);
$(".fa-eye").click(function ()
$(".fa-visibles").addClass('hide');
$(".fa-invisibles").removeClass('hide');
drawTable(table, '.fa-inactive, .fa-invisible-data', 0);
);
);
【讨论】:
【参考方案2】:您要求提供示例 - 我假设您的意思是使用我提到的窗格技术的示例,因此我在下面提供了一个示例。但是我仍然认为您可能需要考虑使用search builder。
我的示例执行以下操作:
(1) 它对第一列使用窗格。表格列显示“检查”和“交叉”符号,但过滤器窗格使用“活动”和“非活动”字样。
(2) 它打开表时只选择了“活动”记录。
我做了以下更改:
(a) 将 html 源数据更改为使用 <td>active</td>
和 <td>inactive</td>
,而不是在 HTML 表中嵌入字体符号。
(b) 添加了一个渲染函数来处理第一列在表格中的显示方式(使用 FA 符号而不是单词)。
(c) 添加逻辑来处理搜索窗格如何使用第一列中的数据。
(d) 仅预选“活动”记录。
我删除了你所有的其他逻辑。
这意味着页面会显示每个搜索窗格(仅用于我的演示) - 因此您可能希望根据需要恢复逻辑以隐藏和显示特定搜索窗格 ,使用您的复选框。否则窗格会在页面中占用太多空间(在我的演示中)。
这里是演示:
$(document).ready(function()
var table = $('#example').DataTable(
dom: 'Plfrtip',
columnDefs: [
targets: 0, // the first column needs custom handling:
render: function ( data, type, row, meta )
if ( type === 'display' ) // show symbols, instead of table data:
if (data === 'active')
return '<em class="fa fa-check pointer fa-active"></em>';
else
return '<em class="fa fa-close pointer fa-inactive"></em>';
else // all other types, including "filter" and "sort"
return data;
,
searchPanes:
show: true,
orthogonal:
// For the search pane, use the "filter" data from the above
// render function. In this case, that is the original raw
// data from the table.
display: 'filter'
,
preSelect: ['active']
,
targets: "_all", // all remaining filter panes are also shown:
searchPanes:
show: true,
initCollapsed: true
]
);
);
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Demo</title>
<!--
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">
-->
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/select/1.3.0/js/dataTables.select.min.js"></script>
<script src="https://cdn.datatables.net/searchpanes/1.0.1/js/dataTables.searchPanes.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/searchpanes/1.0.1/css/searchPanes.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.3.0/css/select.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">
</head>
<body>
<div style="margin: 20px;">
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Status</th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td> inactive</td>
<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>active</td>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>active</td>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td> inactive</td>
<td>Cedric Kelly</td>
<td>Senior javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>active</td>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>active</td>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
<tr>
<td>active</td>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137,500</td>
</tr>
<tr>
<td>active</td>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327,900</td>
</tr>
<tr>
<td>active</td>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205,500</td>
</tr>
<tr>
<td>active</td>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103,600</td>
</tr>
<tr>
<td>active</td>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90,560</td>
</tr>
<tr>
<td>active</td>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342,000</td>
</tr>
<tr>
<td>active</td>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$470,600</td>
</tr>
<tr>
<td>inactive</td>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>$313,500</td>
</tr>
<tr>
<td>inactive</td>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>$385,750</td>
</tr>
<tr>
<td>inactive</td>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>$198,500</td>
</tr>
<tr>
<td> inactive</td>
<td>Paul Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>$725,000</td>
</tr>
<tr>
<td> inactive</td>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>2009/04/10</td>
<td>$237,500</td>
</tr>
<tr>
<td> inactive</td>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>$132,000</td>
</tr>
<tr>
<td>inactive</td>
<td>Dai Rios</td>
<td>Personnel Lead</td>
<td>Edinburgh</td>
<td>35</td>
<td>2012/09/26</td>
<td>$217,500</td>
</tr>
<tr>
<td>active</td>
<td>Jenette Caldwell</td>
<td>Development Lead</td>
<td>New York</td>
<td>30</td>
<td>2011/09/03</td>
<td>$345,000</td>
</tr>
<tr>
<td>active</td>
<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>active</td>
<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>active</td>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sydney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
</tr>
<tr>
<td>active</td>
<td>Angelica Ramos</td>
<td>Chief Executive Officer (CEO)</td>
<td>London</td>
<td>47</td>
<td>2009/10/09</td>
<td>$1,200,000</td>
</tr>
<tr>
<td>active</td>
<td>Gavin Joyce</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>42</td>
<td>2010/12/22</td>
<td>$92,575</td>
</tr>
<tr>
<td>active</td>
<td>Jennifer Chang</td>
<td>Regional Director</td>
<td>Singapore</td>
<td>28</td>
<td>2010/11/14</td>
<td>$357,650</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
【讨论】:
以上是关于如何在过滤数据表jQuery中制作多个条件的主要内容,如果未能解决你的问题,请参考以下文章