Javascript 数据表范围日期时间筛选器

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

JavaScrıpt代码：

$(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;
    }
);

$（文档）.ready（函数（）{
var表=$.ajax({
键入：“获取”，
url:“/History/GetCallbackHistory”，
数据：{UserId:document.getElementById（“callbackuserid”）.value}，
数据类型：“json”，
成功：功能（obj、textstatus）{
$（“#回调_表”）.DataTable({
“pagingType”：“输入”，
“语言”：
{
“处理”：“加载…”，
“分页”：{
“以前的”：“，
“下一个”：”
},
},
dom:“
+ ""
+ "",
资料来源：obj，
栏目：[
{
“数据”：“Id”
},
{
“数据”：“日期回调”
},
{
“数据”：“回调ID”
},
{
“数据”：“任务名称”
},
{
“数据”：“callbackStatus”
},
{
“数据”：“点”
},
{
“数据”：“TransactionType”
},
{
“数据”：“日期结束”
}
]
});
},
错误：函数（obj、textstatus）{
警报（obj.msg）；
}
});
$（“#日期选择器_from”）。日期选择器({
展示：“按钮”，
buttonImageOnly:false，
“onSelect”：功能（日期）{
minDateFilter=新日期（Date）.getTime（）；
表1.fnDraw（）；
}
}).keyup（函数（）{
minDateFilter=新日期（this.value）.getTime（）；
表1.fnDraw（）；
});
$（“#日期选择器_to”）。日期选择器({
展示：“按钮”，
buttonImageOnly:false，
“onSelect”：功能（日期）{
maxDateFilter=新日期（Date）.getTime（）；
表1.fnDraw（）；
}
}).keyup（函数（）{
maxDateFilter=新日期（this.value）.getTime（）；
表1.fnDraw（）；
});
});
$.fn.dataTableExt.afnFiltering.push(
功能（oSettings、aData、iDataIndex）{
如果（数据类型.\u日期=='未定义'）{
aData._date=新日期（aData[1]）.getTime（）；
}
if（minDateFilter&！isNaN（minDateFilter））{
if（数据日期maxDateFilter）{
返回false；
}
}
返回true；
}
);

当您像这样使用jQuery的

ajax

时：

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

您正在将jQuery对象分配给

表

变量。您没有将数据表从

success

函数分配给

table

变量

这就是为什么当您尝试使用

table.fnDraw（）

时会出现特定错误的原因：您的

表

不是数据表。ajax调用是异步的-在正常的代码流中，它不会从

success

调用返回任何内容

相反，我推荐的最简单的替代方法是重新安排代码，以使用DataTables对

ajax

的内置支持

在这种新方法中，我们根本不需要使用jQuery

ajax

函数，因此我们将其从代码中完全删除。相反，我们这样做：

var table=$（“#回调_table”）.DataTable({
“ajax”：{
“方法”：“获取”，
“url”：“/History/GetCallbackHistory”，
“数据”：{
UserId:document.getElementById（“callbackuserid”）.value
},
“数据类型”：“json”，
“dataSrc”：”
},
“pagingType”：“输入”，
“语言”：{
“处理”：“加载…”，
“分页”：{
“以前的”：“，
“下一个”：”
},
},
“dom”：”+
"" +
"",
“栏目”：[{
“数据”：“Id”
},
{
“数据”：“日期回调”
},
{
“数据”：“回调ID”
},
{
“数据”：“任务名称”
},
{
“数据”：“callbackStatus”
},
{
“数据”：“点”
},
{
“数据”：“TransactionType”
},
{
“数据”：“日期结束”
}
]
});

需要注意的要点是

ajax

部分：

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

这是jQuery

ajax

函数的包装。但它也使用了jQuery的

ajax

：dataSrc选项的DataTables扩展。此选项将替换旧的

数据：obj

选项。它告诉DataTables您的JSON响应是一个普通数组

完成此操作后，

table

变量将包含一个有效的DataTables对象，现在可以使用

table.fnDraw（）。但是最好使用这个函数的现代名称：
table.draw（）

如果您有过滤问题，在此之后，您可以参考官方的日期范围过滤示例，以确保您的方法与示例的方法相匹配（但使用首选的
日期选择器
控件）