如何讓DataTable繪製新結果？

我使用DataTable插件將新數據繪製到表格中時出現問題。我有表格，顯示存儲在一個模式內的通知#recipientsTable的接收者。現在，無論何時打開模式，它都會顯示不同的收件人，這些收件人的數據來自服務器的響應。所以這是它的樣子：如何讓DataTable繪製新結果？

當你點擊這個標記的通知的消息時，這個存儲在女巫表中的模式被顯示。

正如你可以看到它是一個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); 
    }); 
}

所以這個函數打開模態和initalises數據表。所以當我第一次點擊任何通知加載頁面並請求查看它的收件人時，它會向我顯示正確的內容，但是當我請求查看其他通知的收件人時，同一用戶將顯示爲從第一次繪圖和我的網絡中瀏覽器的工具，我看到沒有新的請求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(); 
});

，但沒有成功。有沒有人有任何想法，我該如何做到這一點？

來源

2016-09-30 Ognj3n

你確定繪畫事件被解僱嗎？ IIRC，每次重新繪製表時都會啓動。模式可能只是顯示/隱藏表，而不重繪它？ – Sebastianb

我相信你已經嘗試了很多方法。

我可以建議一種方法，我最近成功地完成了。

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

});

來源

2016-09-30 12:26:49

如何在初始化數據表時使用ajax方法獲得所有數據時獲取此tempArr？ – Ognj3n

當ajax完成時，您可以獲得該響應並執行循環並傳遞給tempArr –

我的猜測是表格實際上沒有被重繪，但模態顯示/隱藏（而表格保持不變）。我會嘗試加入destroy選擇到DataTable初始化PARAMS

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再次（檢查鏈接，更詳盡的解釋），並應使一個新的ajax調用。

希望它有幫助！

來源

2016-09-30 16:42:26 Sebastianb

如何讓DataTable繪製新結果？

回答

相關問題