带有自定义客户端过滤器的 jQuery DataTables

• 下载源代码 - 1.1 MB

引言

在本文中，我将解释如何将 jQuery DataTables 与客户端处理结合使用。 DataTables 中有很多内置功能，但很多应用程序可能需要一些附加功能。 本教程有助于通过自定义过滤器、复选框、单选按钮、日期范围过滤器和文本框来扩展功能。

背景

jQuery dataTables 有两个处理选项，即客户端和服务器端处理。 这些选项中的每一个都有其自身的优缺点，并且仅适用于少数选定的场景。 如果要处理的记录少于 10,000 条，可以使用客户端处理。 这样做的原因是，我们不希望浏览器因数据过载而导致加载和过滤数据时运行缓慢。 服务器端处理更适合处理超过 10,000 条记录的数据。 尽管它每次执行任何过滤时都会调用数据库，但速度更快。

开始吧

在这里，我们使用使用 HTML 预定义的硬编码数据，并使用 jQuery 执行自定义过滤器。 我试图使代码尽可能简单。 要理解本教程，需要对 HTML、jQuery、JavaScript 和 Bootstrap (可选) 有基本的了解。 jQuery DataTables 提供了一个用于过滤所有列或在初始化表期间定义的那些选定列的文本框。 但在本教程中，我将扩展 DataTables 的一些自定义过滤器功能。

1. 根据一个选定列上的单选按钮的值过滤数据
2. 选择用于过滤的列，然后使用自定义文本框进行搜索
3. 根据需求更改 dataTable 列的可搜索功能
4. 基于自定义数据范围（开始日期和结束日期）进行过滤
5. 搜索结果高亮显示

Using the Code

由于数据是使用 Table 标签在 HTML 中硬编码的，因此我们不会对此进行讨论。 这是本教程中使用的数据的屏幕截图。

这是将其初始化为 DataTable 的 jQuery 代码。

        var table = $('#example').DataTable(
        {
            "columnDefs": [
                {
                    "targets": [3],
                    "visible": true,
                    "searchable": true,
                    "type": "num"
                },
                {
                    "targets": [2],
                    "visible": true,
                    "searchable": true,
                    "type": "string"
                },
                {
                    "targets": [1],
                    "visible": true,
                    "searchable": true,
                    "type": "string"
                },
                {
                    "targets": [0],
                    "visible": true,
                    "searchable": true,
                    "type": "string"
                },
                {
                    "aoColumns": [
              { "sName": "name" },
              { "sName": "position" },
              { "sName": "office" },
              { "sName": "age" },
              { "sName": "startdate" },
                { "sName": "salary" }
                    ]
                }
            ]
        });

让我们从我们的功能开始。

1. 选择用于过滤的列，然后使用自定义文本框进行搜索

在这里，所有复选框都代表表的列。 复选框值表示该列是否可搜索。 每个复选框都有一个事件侦听器，它会重新初始化 dataTable。 DataTable 的属性一旦设置就无法更改。 因此，如果我们要更改它们，我们需要重新初始化这些属性。 这是关于复选框值更改的事件侦听器。

   $('.custom-checkbox').change(function () {
         changeTable(true);
   });

   function changeTable(checkBoxStatus) {
        i = 0;
        var arr = [];
        $('input:checkbox[name="searchby-column"]:checked').each(function () {
            arr[i++] = parseInt(this.value);
        });
        var searchBox = $('#customSearchTextBox').val();
        if (checkBoxStatus) {
            if (arr[0] == null) {
                arr = [0, 1, 2, 3, 4, 5];
            }
            table.destroy();
            table = $('#example').DataTable(
                {
                    "pagingType": "simple",
                    "iDisplayLength": 5,
                    "iDisplayStart": 1,
                    columnDefs: [
                       { targets: arr, searchable: true },
                       { targets: '_all', searchable: false }
                    ]
                }
            );
        }
        //use custom search box
        table.search(searchBox).draw();
    }

此代码重新初始化表格，并根据文本框值过滤表格。

    $('#customSearchTextBox').on('keyup keypress change', function () {
        table.search(this.value).draw();
    });

此代码块还有助于更改表的可搜索属性。 根据需求，可以设置哪些列是可搜索的，哪些不应该被搜索。

2. 基于一个选定列上的单选按钮的值过滤数据

在这里，有一些预定义的位置值。 有一个事件侦听器附加到这些单选按钮。

    ('.customRadioButton').change(function () {
        table.columns(2).search(this.value).draw();
    });

在这里，我们决定搜索哪一列，因此我们在函数中提到了该列的索引。

3. 基于自定义数据范围（开始日期和结束日期）进行过滤

很多时候，我们遇到需要基于特定日期范围过滤表格的需求。 考虑到这种情况，我提出了该代码。 这一点也不难。

首先，我们需要根据我们的需求初始化日期选择器。

    $('.input-group.date').datepicker({
        format: "mm/dd/yy",
        orientation: "top left",
        autoclose: true,
        todayHighlight: false,
        toggleActive: false
    });

这是日期范围的事件侦听器的代码。

    $('#start-date, #end-date').change(function () {
        table.draw();
    });

我们使用自定义 jQuery Datatable 函数来执行日期范围过滤。

                $.fn.dataTable.ext.search.push(
    function (settings, data, dataIndex) {
        var startDate = Date.parse($('#start-date').val(), 10);
        var endDate = Date.parse($('#end-date').val(), 10);
        var columnDate = Date.parse(data[4]) || 0; // use data for the age column
        if ((isNaN(startDate) && isNaN(endDate)) ||
             (isNaN(startDate) && columnDate <= endDate) ||
             (startDate <= columnDate && isNaN(endDate)) ||
             (startDate <= columnDate && columnDate <= endDate)) {
            return true;
        }
        return false;
    }
    );

4. 搜索结果高亮显示

有一个名为 Search Highlight 的 DataTable 扩展，它根据 textbox 中的关键字突出显示搜索结果。 这是突出显示搜索结果的 JavaScript 代码。

                 //Hightlight our search text in the datatable
    table.on('draw', function () {
        var body = $(table.table().body());
        //We can change the highlight color in dataTables.searchHighlight.css
        body.unhighlight();
        body.highlight(table.search());
    });

如果希望更改突出显示颜色，有一个名为 dataTable.searchHighlight.css 的 CSS 文件。 更改文件中的颜色代码将更改突出显示颜色。

    table.dataTable span.highlight {
        background-color: yellow;
    }

关注点

处理这个小作业确实帮助我理解了 DataTables 的范围以及它可以在多大程度上使用。 我相信它的功能可以进一步增强，并且可以证明是更快表处理的最终解决方案。

历史

这是我对该项目的第一次更新。 我将更多地使用 DataTables，并尝试进一步增强其功能。