具备多列过滤器的jQuery DataTables

本文原文来自：https://www.codeproject.com/。源代码请到上面链接上自行下载。本文对链接里的英文关键位置进行了翻译，禁止转载，祝大家学习愉快，有更多问题请找锐英源孙老师，QQ396806883，微信ryysoft。

介绍

Jquery datatable提供单独的列过滤，但不提供列组过滤。此外，我们只能从每列中选择一个项目。本文实际演示了如何利用列级过滤创建一个自定义过滤器，只是像Excel的过滤器，即用户可以输入过滤项目，这些项目将被选择在主网格。

背景

本文使用Jquery Datatable作为网格和过滤器API。请看看这里的实际文档。

使用代码

此代码使用配置有static Json dataset的Jquery Datatable 的基本初始化功能。但是，dataset可以通过Web服务轻松地集成。
一旦表初始化，它调用configFilter函数，调用参数是输入数组类型，传递的是所需列的序数。此函数实际上循环传递的每个列，并创建一个过滤器对话框，对话框带有独立数据，这个数据列在一个独立列下。
示例：如果传递的输入数组是[1,2]，则它将创建两个过滤器弹出/对话框，用了列2和列3的数据（数组是基于零索引的）。
实际的源代码如下：
// 此函数初始化过滤器中的内容modal
function configFilter($this, colArray) {
setTimeout(function () {
var tableName = $this[0].id;
var columns = $this.api().columns();
$.each(colArray, function (i, arg) {
$('#' + tableName + ' th:eq(' + arg + ')').append
('<img src="http://www.icone-png.com/png/39/38556.png"
class="filterIcon" onclick="showFilter(event,\'' +
tableName + '_' + arg + '\')" />');
});

                var template = '<div class="modalFilter">' +
'<div class="modal-content">' +
'{0}</div>' +
'<div class="modal-footer">' +
'<a href="#!"
onclick="clearFilter(this, {1}, \'{2}\');" 
class=" btn left waves-effect waves-light">Clear</a>' +
'<a href="#!"
onclick="performFilter(this, {1}, \'{2}\');"
class=" btn right waves-effect waves-light">Ok</a>' +
'</div>' +
'</div>';
$.each(colArray, function (index, value) {
columns.every(function (i) {
if (value === i) {
var column = this, content = '<input type="text"
class="filterSearchText"
onkeyup="filterValues(this)" /> <br/>';
var columnName = $(this.header()).text().replace(/\s+/g, "_");
var distinctArray = [];
column.data().each(function (d, j) {
if (distinctArray.indexOf(d) == -1) {
var id = tableName + "_" + columnName + "_" + j;
content += '<div><input type="checkbox" value="' +
d + '"  id="' + id + '"/>
<label for="' + id + '"> ' +
d + '</label></div>';
distinctArray.push(d);
}
});
var newTemplate = $(template.replace('{0}', content).replace
('{1}', value).replace('{1}', value).replace('{2}', tableName).replace
('{2}', tableName));
$('body').append(newTemplate);
modalFilterArray[tableName + "_" + value] = newTemplate;
content = '';
}
});
});
}, 50);
过滤器实际上看起来像这样：
https://www.codeproject.com/KB/Articles/1137325/filter__3_.png
https://www.codeproject.com/KB/Articles/1137325/filter2.png
一旦基于期望的列来初始化过滤器，过滤器弹出框可以通过列标题的过滤器图标点击来激活。用户现在可以在文本框中键入或单击复选框，然后按'确定'。现在将在网格上应用过滤器，并选择匹配的行。“清除”按钮。实际的源代码可以在压缩文件夹中找到。
//Execute the filter on the table for a given column
        function performFilter(node, i, tableId) {
            var rootNode = $(node).parent().parent();
            var searchString = '', counter = 0;

            rootNode.find('input:checkbox').each(function (index, checkbox) {
                if (checkbox.checked) {
                    searchString += (counter == 0) ? checkbox.value : '|' + checkbox.value;
                    counter++;
                }
            });
            $('#' + tableId).DataTable().column(i).search(
                searchString,
                true, false
            ).draw();
            rootNode.hide();
            $('#mask').hide();
        }

结论

目前，这会对从选定列中过滤的记录的列组进行过滤。我们可以轻松扩展它以支持级联过滤器（列过滤器仅包含由其他活动过滤器过滤的数据）。