将自定义搜索字段添加到 DataTable 对象答案

【问题标题】：Adding custom search fields to a DataTable object将自定义搜索字段添加到 DataTable 对象
【发布时间】：2020-12-14 02:18:05
【问题描述】：

我需要将我在页面上创建的字段添加到 DataTable 对象。即使它们不是典型的参数（顺序、搜索、分页等），它们也可以与 DataTables 的其他对象状态一起保存和加载。

JavaScript

$(document).ready(function () {
    var table = $('#stackoverflow-datatable').DataTable({
        "processing": true,
        "stateSave": true,
        "stateSaveCallback": function (settings, data) {
            $.ajax({
                "url": "/api/save_state",
                "data": data,
                "dataType": "json",
                "success": function (response) {}
            });
        },
        "stateLoadCallback": function (settings) {
            var o;
            $.ajax({
                "url": "/api/load_state",
                "async": false,
                "dataType": "json",
                "success": function (json) {
                    o = json;
                }
            });

            return o;
        }
    });
});

然后，我认为将字段添加到对象的 JavaScript 如下。

<script type="text/javascript">
    $.fn.dataTableExt.afnFiltering.push(
        function (settings, data) {
            var dateStart = parseDateValue($("#dateStart").val());
            var dateEnd = parseDateValue($("#dateEnd").val());
            var evalDate = parseDateValue(data[9]);

            return evalDate >= dateStart && evalDate <= dateEnd;
        }
    );

    function getDate(element) {
        return $.datepicker.parseDate('mm/dd/yy', element.value);
    }

    // Convert mm/dd/yyyy into numeric (ex. 08/12/2010 -> 20100812)
    function parseDateValue(rawDate) {
        var dateArray = rawDate.split("/");

        return dateArray[2] + dateArray[0] + dateArray[1];
    }
</script>

HTML

<input type="text" id="dateStart" class="datepicker" name="dateStart">
<input type="text" id="dateEnd" class="datepicker" name="dateEnd">

<table id="stackoverflow-datatable">
    <thead>
    <th>ID</th>
    <th>Name</th>
    <th>Date</th>
    </thead>

【问题讨论】：

标签： javascript jquery datatables

【解决方案1】：

要实现自定义范围搜索，请使用：

$.fn.dataTable.ext.search.push

要保存和加载自定义状态参数，请使用：

stateSaveParams: function (settings, data) {}
stateLoadParams: function (settings, data) {}

您必须将事件侦听器附加到您的日期选择器，以便在每次更改开始或结束日期时重新绘制表格，但您还必须在表格状态恢复时填写输入字段。这可能会很棘手，因为选择器和表格之间存在交叉依赖关系，因此我引入了一个自定义事件来确保日期选择器状态在创建后恢复。

我使用静态表根据您的代码创建了一个工作示例：

JSFIDDLE

【讨论】：

所以'search.push'将这些添加到DataTable对象？您是否尝试过转到不同的页面并返回查看它是否记得值？因为我正在使用的 JSFiddle 中的所有内容都非常适合过滤/搜索。但是，DataTables 搜索字段会记住其值，但添加的自定义字段：startDate、endDate 仍未添加到 Datatable 输出对象的“搜索”区域。
不，您需要额外的 API 方法。我已经更新了我的答案和我的代码以包含您的所有要求。我已经在 localhost 和表格状态上测试了脚本，同时保留了自定义字段。