Question

如何根据日期选择器选择加载具有新日期的DataTables。

使用客户端Ajax调用加载数据，然后我想基于日期范围创建新数据集。

每当我调用我的函数重新加载数据时，我都会遇到初始化错误。我试图摧毁桌子，然后再画画，但没有。

Ajax电话：

   var getMessageDate = function () {

   var tdata;

      console.log(fromDateSelection);

      $.ajax({
         type: "POST",
         url: "DataTable.aspx/GetSummary",
         data: JSON.stringify({ "sender": $('#ddBICS :selected').val(), "date": $('#fromDateSelection') }),
         dataType: "json",
         contentType: "application/json; charset=utf-8",
         success: function(result) {

         tdata = jQuery.parseJSON(result.d);

         oMessageDate = $("#tblDataTable").DataTable({
            data: tdata,
        });
    }
  });
}

然后选择日期更改事件为：

  $('#fromDate').datepicker({
    format: "yyyy-mm-dd",
    todayBtn: "linked",
    orientation: "auto left",
    forceParse: false,
    autoclose: true,
    todayHighlight: true,
   }).on('change', function () {

   getMessageDate();
   fromDateSelection = $('#fromDate').val();
 });

如何在选择日期后重建DataTable？

Answer 1

你可以这样做

var datatableObj = $("#tblDataTable").DataTable(); // In global scope

删除所有行

datatableObj.clear() // to clear the existing data. Remember this will not redraw the empty table. to redraw, append .draw() with .clear()

添加

datatableObj.rows.add([ {
    "name":       "Tiger Nixon",
    "position":   "System Architect",
    "salary":     "$3,120",
    "start_date": "2011/04/25",
    "office":     "Edinburgh",
    "extn":       "5421"
}, {
    "name": "Garrett Winters",
    "position": "Director",
    "salary": "$5,300",
    "start_date": "2011/07/25",
    "office": "Edinburgh",
    "extn": "8422"
} ] )
.draw(); // Use add function of rows object to add multiple tr. and finally draw the datatable

查看docs了解详情

<强>更新

使用以下代码

var oMessageDate = $("#tblDataTable").DataTable(); 

var getMessageDate = function () {

   var tdata;

    console.log(fromDateSelection);

    $.ajax({
        type: "POST",
        url: "DataTable.aspx/GetSummary",
        data: JSON.stringify({ "sender": $('#ddBICS :selected').val(), "date": $('#fromDateSelection') }),
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        success: function(result) {
            tdata = jQuery.parseJSON(result.d);
            oMessageDate.clear().rows.add(tdata).draw();
        }
    });
}

此外，我认为fromDateSelection = $('#fromDate').val();应该出现在getMessageDate()

之前

Answer 2

drawCallback的其他解决方案：

$('table.datatable').DataTable({
    // ...
    "drawCallback": function (settings) {
        $('.datepicker').datepicker('remove');
    }
});

DataTables，在Datepicker之后重新加载数据集

2 个答案: