数据表范围日期时间过滤器

Question

我有一个用 ajax 响应填充的数据表。在响应中，我得到一个字符串日期数据。我可以在数据表上写入该数据，但我无法使用日期范围过滤数据。我已经尝试了很多方法，但我无法解决这个问题。我的一些尝试得到“fnDraw()”不是函数或类似这样的错误。如何制作范围过滤器？

JavaScript 代码：

$(document).ready(function () {
  var table = $.ajax({
        type: "GET",
        url: '/History/GetCallbackHistory',
        data: { UserId: document.getElementById("callbackuserid").value },
        dataType: 'json',
        success: function (obj, textstatus) {
            $('#callback_table').DataTable({
                "pagingType": "input",
                "language":
                {
                    "processing": "<div class='loader'>Loading...</div>",
                    "paginate": {
                        "previous": "",
                        "next": ""
                    },
                },
                dom: "<'row'<'container-c'pi<'permuheader'<'refresh-button'>><'tlength'l>>>"
                    + "<'row'>"
                    + "<'row'<'col-sm-12't>r>",
                data: obj,
                columns: [
                    {
                        "data": "Id"
                    },
                    {
                        "data": "DateCallback"
                    },
                    {
                        "data": "callbackId"
                    },
                    {
                        "data": "Task_name"
                    },
                    {
                        "data": "callbackStatus"
                    },
                    {
                        "data": "Point"
                    },
                    {
                        "data": "TransactionType"
                    },
                    {
                        "data": "DateEnd"
                    }
                ]
            });
        },
        error: function (obj, textstatus) {
            alert(obj.msg);
        }
    });
    $("#datepicker_from").datepicker({
        showOn: "button",
        buttonImageOnly: false,
        "onSelect": function (date) {
            minDateFilter = new Date(date).getTime();
            table.fnDraw();
        }
    }).keyup(function () {
        minDateFilter = new Date(this.value).getTime();
        table.fnDraw();
    });

    $("#datepicker_to").datepicker({
        showOn: "button",
        buttonImageOnly: false,
        "onSelect": function (date) {
            maxDateFilter = new Date(date).getTime();
            table.fnDraw();
        }
    }).keyup(function () {
        maxDateFilter = new Date(this.value).getTime();
        table.fnDraw();
    });
});

$.fn.dataTableExt.afnFiltering.push(
    function (oSettings, aData, iDataIndex) {
        if (typeof aData._date == 'undefined') {
            aData._date = new Date(aData[1]).getTime();
        }

        if (minDateFilter && !isNaN(minDateFilter)) {
            if (aData._date < minDateFilter) {
                return false;
            }
        }

        if (maxDateFilter && !isNaN(maxDateFilter)) {
            if (aData._date > maxDateFilter) {
                return false;
            }
        }

        return true;
    }
);

Answer 1

当你像这样使用 jQuery 的 ajax 时：

var table = $.ajax({ ... });

您正在将 jQuery 对象分配给您的 table 变量。您没有将 success 函数中的 DataTable 分配给 table 变量。

这就是为什么当您尝试使用table.fnDraw() 时，您会收到特定错误：您的table 不是DataTable。 ajax 调用是异步的 - 在您的代码的正常流程中，它不会从success 调用返回任何内容。

相反，我推荐的最简单的替代方法是重新安排您的代码以使用 DataTables 对ajax 的内置支持。

在这种新方法中，我们根本不需要使用 jQuery ajax 函数 - 所以我们从代码中完全删除了它。相反，我们这样做：

var table = $('#callback_table').DataTable({
  "ajax": {
    "method": "GET",
    "url": "/History/GetCallbackHistory",
    "data": {
      UserId: document.getElementById("callbackuserid").value
    },
    "dataType": "json",
    "dataSrc": ""
  },
  "pagingType": "input",
  "language": {
    "processing": "<div class='loader'>Loading...</div>",
    "paginate": {
      "previous": "",
      "next": ""
    },
  },
  "dom": "<'row'<'container-c'pi<'permuheader'<'refresh-button'>><'tlength'l>>>" +
    "<'row'>" +
    "<'row'<'col-sm-12't>r>",
  "columns": [{
      "data": "Id"
    },
    {
      "data": "DateCallback"
    },
    {
      "data": "callbackId"
    },
    {
      "data": "Task_name"
    },
    {
      "data": "callbackStatus"
    },
    {
      "data": "Point"
    },
    {
      "data": "TransactionType"
    },
    {
      "data": "DateEnd"
    }
  ]
});

要注意的要点是ajax部分：

  "ajax": {
    "method": "GET",
    "url": "/History/GetCallbackHistory",
    "data": {
      UserId: document.getElementById("callbackuserid").value
    },
    "dataType": "json",
    "dataSrc": ""
  },

这是 jQuery ajax 函数的封装。但它也使用 jQuery 的 ajax 的 DataTables 扩展：dataSrc 选项。此选项替换旧的 data: obj 选项。它告诉 DataTables 你的 JSON 响应是一个普通数组。

完成此操作后，您的 table 变量将包含一个有效的 DataTables 对象 - 您现在可以使用 table.fnDraw();。但最好使用这个函数的现代名称：table.draw();。

如果您有过滤问题，之后，您可以参考官方日期范围过滤示例DataTables date range filter，以确保您的方法与示例的方法匹配（但使用您首选的datepicker控件）。