javascript - 将自定义搜索字段添加到 DataTable 对象

Question

我需要将我在页面上创建的字段添加到 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>

Answer 1

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

$.fn.dataTable.ext.search.push

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

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

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

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

JSFIDDLE