Question

我需要将我在页面上创建的字段添加到Datatables对象。因此即使它们不是典型的参数（顺序，搜索，分页等），它们也可以与其他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;
        }
    });
});

然后我认为JS会将字段添加到对象中......

<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

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

"CellA";"CellA";"CellA";"CellA"

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

$.fn.dataTable.ext.search.push

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

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

JSFIDDLE

将自定义搜索字段添加到可数据对象

1 个答案: