Question

我使用DataTable插件将新数据绘制到我的表格中时遇到问题。我有一个表格，显示存储在一个模态中的名为#recipientsTable的通知的接收者。现在，每当打开模态时，它应该显示不同的收件人，我将从服务器获取其数据作为响应。所以这就是它的样子：

当您单击此标记通知的消息时，将显示存储用户的女巫表中的模式。

正如您所看到的那样，它是一个DataTable表，我就是这样做的：

function showNotificationRecipients(app_id) {
   var data = {};

   $('#myModal').modal('toggle');
   data.notificationId = notification_id;
   data.appId = app_id;
   data.fields = customFields;
   var table = $("#recipientsTable").DataTable({
       "retrieve": true,
       "StateSave": true,
       "PaginationType": "full_numbers",
       "bPaginate": true,
       "bLengthChange": true,
       "bFilter": true,
       "bSort": false,
       "bInfo": true,
       "bAutoWidth": false,
       "bProcessing": true,
       "orderClasses": false,
       "processing": true,
       "serverSide": true,
       "ajax": {
            url: "showRecipients.php",
            type: "POST",
            dataType: "JSON",
            data: data                            
       }
   });
   table.on( 'xhr', function ( e, settings, json ) {
         console.log( 'Ajax event occurred. Returned data: ', json );
    } );
}

因此，此函数打开模态和初始化DataTable。因此，当我第一次点击页面加载任何通知并请求查看它的收件人后，它会显示正确的，但当我请求查看其他通知的收件人时，相同的用户显示为从第一次抽奖和我的网络浏览器的工具我看到没有发送showRecipients.php的新请求。我尝试了各种各样的事情：

    if ( $.fn.dataTable.isDataTable( '#recipientsTable' ) ) {
        var table = $("#recipientsTable").DataTable({
             "ajax": {
             url: "showRecipients.php",
             type: "POST",
             dataType: "JSON",
             data: data
         }
})
}else {
       var table = $("#recipientsTable").DataTable({
                  "retrieve": true,
                  "StateSave": true,
                  "PaginationType": "full_numbers",
                  "bPaginate": true,
                   "bLengthChange": true,
                   "bFilter": true,
                   "bSort": false,
                   "bInfo": true,
                   "bAutoWidth": false,
                   "bProcessing": true,
                   "orderClasses": false,
                   "processing": true,
                   "serverSide": true,
                   "ajax": {
                         url: "showRecipients.php",
                         type: "POST",
                         dataType: "JSON",
                         data: data
                   }
            });
  }

此外：

if ( $.fn.dataTable.isDataTable( '#recipientsTable' ) ) {
         "retrieve": true,
         "StateSave": true,
         "PaginationType": "full_numbers",
         "bPaginate": true,
         "bLengthChange": true,
         "bFilter": true,
         "bSort": false,
         "bInfo": true,
         "bAutoWidth": false,
         "bProcessing": true,
         "orderClasses": false,
         "processing": true,
         "serverSide": true,
         "ajax": {
              url: "showRecipients.php",
              type: "POST",
              dataType: "JSON",
              data: data
         }
     });
    })
   }
    else {
        var table = $("#recipientsTable").DataTable({
                    "retrieve": true,
                    "StateSave": true,
                     "PaginationType": "full_numbers",
                     "bPaginate": true,
                     "bLengthChange": true,
                     "bFilter": true,
                     "bSort": false,
                     "bInfo": true,
                     "bAutoWidth": false,
                     "bProcessing": true,
                     "orderClasses": false,
                     "processing": true,
                     "serverSide": true,
                     "ajax": {
                          url: "showRecipients.php",
                          type: "POST",
                          dataType: "JSON",
                          data: data
                     }
            });
    }

而且：

table.on( 'draw', function () {
       var json = table.ajax.reload();
 } );

但没有成功。有谁知道如何才能使这项工作成为现实？

Answer 1

我相信你已经尝试了很多方法。

我可以建议一种方式，我最近成功完成了。

//Check table is ready
$('#recipientsTable').ready(function () {

   //Check data-table is already exists   
   if(table) 
   {
      //If already exists then
      //1.clear the datatable by using .clear()
      table.clear();

      //2.destroy the datatable by using .destroy()
      table.destroy();

      //3.Re-initialize your data table
      table.DataTable({
         //Params
      });

      //4.Add new data by using table.rows.add(tempArr).draw(); 
      var tempArr = [];
      table.rows.add(tempArr).draw();

      //5.If you've new columns you can adjust them also. 
      table.columns.adjust().draw();

   }
   else
   {
       //Initialize your data table first time
       table.DataTable({
         //Params
       });
   }

});

Answer 2

我的猜测是表格实际上没有重新绘制，但是模式正在显示/隐藏（而表格保持不变）。我尝试将destroy选项添加到数据表初始化参数

var table = $("#recipientsTable").DataTable({
   "destroy":true,
   "retrieve": true,
   "StateSave": true,
   "PaginationType": "full_numbers",
   "bPaginate": true,
   "bLengthChange": true,
   "bFilter": true,
   "bSort": false,
   "bInfo": true,
   "bAutoWidth": false,
   "bProcessing": true,
   "orderClasses": false,
   "processing": true,
   "serverSide": true,
   "ajax": {
        url: "showRecipients.php",
        type: "POST",
        dataType: "JSON",
        data: data                            
   }
});

当你再次调用函数showNotificationRecipients时，这会使Datatables破坏前面的实例（查看链接以获得更详尽的解释），它应该进行新的ajax调用。

希望它有所帮助！

如何让DataTable绘制新的结果？

2 个答案: