jQuery DataTable - 按预期方式隐藏行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17347179/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery DataTable - Hide rows the intended way
提问by érik Desjardins
We are currently working on a web-based CRM. The project is going great except for a frustrating issue.
我们目前正在开发基于 Web 的 CRM。除了一个令人沮丧的问题外，该项目进展顺利。
we are using the DataTable jQuery plug-infor almost every sortabletables in the application. Here is a list of active incidents.
我们对应用程序中几乎所有可排序的表格都使用了DataTable jQuery 插件。这是活动事件的列表。
As you can see, the third column represents the type of the incidents (ticket, change request, service request, etc.)
如您所见，第三列表示事件的类型（工单、变更请求、服务请求等）
Users requested a filter box placed on top of the previous table to filter the incidents types. For instance, if you choose "Ticket only", every other type will be hidden. Up until now, everything is working.
用户请求放置在上表顶部的过滤器框来过滤事件类型。例如，如果您选择“Ticket only”，其他所有类型都将被隐藏。到目前为止，一切正常。
In order to do so, every row has a CSS class that represents the incident type.
为此，每一行都有一个表示事件类型的 CSS 类。
- Row #1 : class="ticket"
- Row #2 : class="changeRequest"
- 第 1 行：class="ticket"
- 第 2 行：class="changeRequest"
When the filter box value changes, the following javascript code is executed
当过滤框值发生变化时，执行以下javascript代码
$('table.sortable').each(function() {
for (var i = 0; i < rows.length; i++) {
if ($(rows[i]).hasClass(vClass)) $(rows[i]).hide();
}
});
where
在哪里
- vClass = The CSS class representing the incident type
- rows = All dataTable rows, got from "$(SomeDatatable).dataTable().fnGetNodes();"
- $('table.sortable') = All dataTables
- vClass = 表示事件类型的 CSS 类
- rows = 所有数据表行，来自“$(SomeDatatable).dataTable().fnGetNodes();”
- $('table.sortable') = 所有数据表
Now, fasten your seatbelts (French liner). When you implicitly hide a row, dataTable still counts it. Here is the fabulous result.
现在，系好安全带（法式衬垫）。当您隐式隐藏一行时，dataTable 仍然对其进行计数。这是惊人的结果。
That being explained, there goes the main question : How am I supposed to tell dataTable that I want to hide rows without deleting them forever? DataTable already has a filter box but I need it to work independently along with the type filter box (not in image).
已经解释过了，主要问题是：我应该如何告诉 dataTable 我想隐藏行而不永远删除它们？DataTable 已经有一个过滤器框，但我需要它与类型过滤器框（不在图像中）一起独立工作。
Is there a way to add a second filter, maybe?
有没有办法添加第二个过滤器，也许？
采纳答案by BLSully
You need to write a custom filter for that table. Example:
您需要为该表编写自定义过滤器。例子：
$.fn.dataTableExt.afnFiltering.push(function (oSettings, aData, iDataIndex) {
if ($(oSettings.nTable).hasClass('do-exclude-filtering')) {
return aData[16] == '' || $('#chkShowExcluded').is(':checked');
} else return true;
});
In that example we dynamically add and remove the 'do-exclude-filtering' class to a table, and if it has the class, it checks each row to see if a given cell has a value. The logic can be anything you can dream up, just keep it fast (this is executed for every row, on every draw, for every table on the page (note it's added to a 'global' array in DT, not an individual instance)
在该示例中，我们动态地向表中添加和删除“do-exclude-filtering”类，如果它具有该类，它会检查每一行以查看给定的单元格是否具有值。逻辑可以是你能想到的任何东西，只要保持快速（这对每一行、每次绘制、页面上的每个表格都执行（注意它被添加到 DT 中的“全局”数组，而不是单个实例）
Return trueto include the row, return falseto hide the row
返回true包含行，返回false隐藏行
Here is the datatable reference to use the afnFiltering capabilities: http://datatables.net/development/filtering
以下是使用 afnFiltering 功能的数据表参考：http://datatables.net/development/filtering
The advantage to this instead of using .fnFilter()is that this works ALONG WITH, so the user can still use the filtering box in the top right (by default, I see yours is bottom right) to further filter the results you choose to show them. In other words, say you hide all 'completed' items, so the user only sees 'incomplete' items in the table. Then they can still filter the table for 'laptop' and see only the rows that are BOTH incomplete and have 'laptop' in their description
这样做而不是使用的优点.fnFilter()是它可以同时工作，因此用户仍然可以使用右上角的过滤框（默认情况下，我看到你的是右下角）来进一步过滤您选择显示的结果。换句话说，假设您隐藏了所有“已完成”的项目，因此用户只能在表中看到“未完成”的项目。然后他们仍然可以过滤表中的“笔记本电脑”，只看到不完整且描述中包含“笔记本电脑”的行
回答by lukenofurther
I'm unable to help with the datatable part as I've never used it, but you can improve the javascript you run when the filter box changes to:
我无法帮助处理数据表部分，因为我从未使用过它，但是当过滤器框更改为：
$('.table-sortable').find('tr.' + vClass).removeClass('hidden').addClass('show');
$('.table-sortable').find('tr:not(.' + vClass + ')').removeClass('hidden').addClass('show');
with appropriate css styling. Or you could do:
使用适当的 css 样式。或者你可以这样做：
$('.table-sortable').find('tr.' + vClass).show();
$('.table-sortable').find('tr:not(.' + vClass + ')').hide();
If you try one of these approaches instead you may get lucky and circumvent the datatable issue, but either way I believe your code will be more efficient.
如果您尝试其中一种方法，您可能会很幸运并绕过数据表问题，但无论哪种方式，我都相信您的代码会更有效率。
回答by Majid Fouladpour
DataTables offers this out of the box: DataTables individual column filtering exampleor, better still DataTables individual column filtering example (using select menus)
DataTables 提供了开箱即用的功能：DataTables 单列过滤示例，或者更好的是DataTables 单列过滤示例（使用选择菜单）
