Javascript 向DataTable对象添加自定义搜索字段

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

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>

$.fn.dataTableExt.afnFiltering.push(
功能（设置、数据）{
var dateStart=parseDateValue（$（“#dateStart”）.val（）；
var dateEnd=parseDateValue（$（“#dateEnd”）.val（）；
var evalDate=parseDateValue（数据[9]）；
返回evalDate>=日期开始（&evalDate 20100812）
函数parseDateValue（rawDate）{
var dateArray=rawDate.split（“/”）；
返回dateArray[2]+dateArray[0]+dateArray[1]；
}

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>

身份证件
名称
日期

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

$.fn.dataTable.ext.search.push

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

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

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

我已经基于您的代码创建了一个工作示例，使用静态表：

---

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