javascript - 如何让DataTable绘制新的结果？

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

});