将自定义搜索字段添加到Datatable对象 [英] Adding custom search fields to a Datatable object

问题描述

我需要将我在页面上创建的字段添加到Datatables对象。所以即使它们不是典型的参数（订单，搜索，分页等），它们可以与Datatables对象状态的其余部分一起得到保存和加载。

I need to add fields that I created on a page to the Datatables object. So that even though they aren't typical parameters (order, search, pagination, etc.) they can get save and loaded along with the rest of the Datatables object state.

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会将字段添加到对象...

And then the JS that I thought would add the fields to the object...

<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>
...

提前感谢您的帮助。

推荐答案

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

To implement a custom range search, use:

$.fn.dataTable.ext.search.push

要保存并加载自定义状态参数，请使用：$（$）

To save and load custom state parameters, use:

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

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

You must attach event listeners to your datepickers, so that the table is redrawn every time the start or ending dates are changed, but you must also fill in the input fields when the table state is restored. This can be tricky because there's a cross-dependency between the pickers and the table, so I've introduced a custom event to make sure the datepickers state is restored after their creation.

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

I've created a working example based on your code, using a static table:

JSFIDDLE

这篇关于将自定义搜索字段添加到Datatable对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！