jQuery DataTable - 按预期方式隐藏行 [英] jQuery DataTable - Hide rows the intended way

问题描述

我们目前正在开发基于网络的 CRM.除了一个令人沮丧的问题外，该项目进展顺利.

我们为几乎所有sortable使用

这样做而不是使用 .fnFilter() 的优点是它可以同时工作，所以用户仍然可以使用右上角的过滤框(默认情况下，我看到你的是底部正确)以进一步过滤您选择显示的结果.换句话说，假设您隐藏了所有已完成"的项目，因此用户只能在表格中看到未完成"的项目.然后他们仍然可以过滤表格中的笔记本电脑"，只看到不完整且描述中包含笔记本电脑"的行

We are currently working on a web-based CRM. The project is going great except for a frustrating issue.

we are using the DataTable jQuery plug-in for almost every sortable tables in the application. Here is a list of active incidents.

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.

In order to do so, every row has a CSS class that represents the incident type.

• Row #1 : class="ticket"
• Row #2 : class="changeRequest"

When the filter box value changes, the following javascript code is executed

$('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

Now, fasten your seatbelts (French liner). When you implicitly hide a row, dataTable still counts it. Here is the fabulous result.

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).

Is there a way to add a second filter, maybe?

解决方案

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)

Return true to include the row, return false to hide the row

Here is the datatable reference to use the afnFiltering capabilities: 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

这篇关于jQuery DataTable - 按预期方式隐藏行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！