刷新數據表與新aaData值

如何刷新數據表，當新的JSON數據被髮送刷新數據表與新aaData值

POST請求接收數據，其被髮送到可裝入功能來填充數據表。

function initializeTable(){ 
 
\t $("#submitbutton").on(
 
\t \t 'click', 
 
\t \t function(){ 
 
\t \t \t $.ajax({ 
 
\t \t \t \t type : 'POST', 
 
\t \t \t \t url : 'rest/log/events', 
 
\t \t \t \t data : { 
 
\t \t \t \t \t fromTime : $("#fromTime-filter").val(), 
 
\t \t \t \t \t toTime : $("#toTime-filter").val(), 
 
\t \t \t \t \t Text : $("#search-filter-input").val() \t 
 
\t \t \t \t }, 
 
\t \t \t \t 
 
\t \t \t \t success : function(data) { 
 
\t \t \t \t \t loadTable(data); 
 
\t \t \t \t }, 
 
\t \t \t \t error : function(jqXHR, textStatus, errorThrown) { 
 
\t \t \t \t \t showAjaxError(jqXHR, textStatus, errorThrown, 
 
\t \t \t \t \t \t $("#error-msg")); 
 
\t \t \t \t } 
 
\t \t \t }); 
 
\t \t }); 
 
}

'數據' 被傳遞至負載功能，它在數據加載到表正確的首次。當我提交POST請求第二次，我看到新的瀏覽器控制檯「數據」，但數據表是不刷新。

但是，當我刷新頁面（數據表被清除），然後做一個新的崗位，新的數據加載正常。我希望無需刷新頁面即可加載新數據。

function loadTable(data) 
 
{ 
 
\t $('#report-table').dataTable({ 
 
\t \t bProcessing : true, 
 
\t \t bJQueryUI : true, 
 
\t \t bLengthChange : false, 
 
\t \t bDestory : true, 
 
\t \t bRetrieve : true, 
 
\t \t bStateSave : true, 
 
\t \t oTableTools: { 
 
\t \t \t sRowSelect: "multi", 
 
\t \t \t aButtons: [ "select_all", "select_none" ] 
 
\t \t }, 
 
\t \t iDisplayLength : 20, 
 
\t \t "aaData": data, 
 
\t \t "aoColumns": [ 
 
\t \t \t { "mData" : "date" \t }, 
 
\t \t \t { "mData" : "name" \t \t }, 
 
\t \t \t { "mData" : "type" \t \t \t }, 
 
\t \t \t { "mData" : "section" \t \t } 
 
\t \t ] 
 
\t }); 
 
}

來源

2015-11-18 johnmills

什麼插件是$ .dataTable？如果是jQuery DataTables插件，則需要使用$（'＃report-table'）。dataTable（）。fnUpdate（data）。 – TAGraves

@TAGraves：是JQuery Datatables。我應該在哪裏添加fnUpdate（數據）？最後？我嘗試了一個if else循環if（typeof viewTable =='undefined'）{datatable（...} else {$（'＃report-table'）datatable.fnUpdate（data）}'但它沒有作品。 – johnmills

它就像你正在使用的DataTable V1.9在我看來。以下是我想做到這一點：

function loadTable(data) 
{ 
    var table = $('#report-table'); 
    if (! $.fn.DataTable.fnIsDataTable(table[0])) { 
    table.dataTable({ 
     bProcessing : true, 
     bJQueryUI : true, 
     bLengthChange : false, 
     bDestory : true, 
     bRetrieve : true, 
     bStateSave : true, 
     oTableTools: { 
      sRowSelect: "multi", 
      aButtons: [ "select_all", "select_none" ] 
     }, 
     iDisplayLength : 20, 
     "aaData": data, 
     "aoColumns": [ 
      { "mData" : "date" }, 
      { "mData" : "name"  }, 
      { "mData" : "type"   }, 
      { "mData" : "section"  } 
     ] 
    }); 
    } else { 
     table.dataTable().fnUpdate(data); 
    } 
}

另一種選擇：

function loadTable(data) 
    { 
     var table = $('#report-table'); 
     if (! $.fn.DataTable.fnIsDataTable(table[0])) { 
     table.dataTable({ 
      bProcessing : true, 
      bJQueryUI : true, 
      bLengthChange : false, 
      bDestory : true, 
      bRetrieve : true, 
      bStateSave : true, 
      oTableTools: { 
       sRowSelect: "multi", 
       aButtons: [ "select_all", "select_none" ] 
      }, 
      iDisplayLength : 20, 
      "aaData": data, 
      "aoColumns": [ 
       { "mData" : "date" }, 
       { "mData" : "name"  }, 
       { "mData" : "type"   }, 
       { "mData" : "section"  } 
      ] 
     }); 
     } else { 
      table.dataTable().fnDestroy(); 
      loadTable(data); 
     } 
    }

來源

2015-11-19 00:23:59 TAGraves

我嘗試了第二個選項和它的工作。非常感謝。我沒有足夠的聲譽給予好評的是，將盡快我到那裏去做。 – johnmills

如果這個或任何答案已經解決您的問題，請考慮接受點擊複選標記，這表明你已經找到了一個解決方案，併爲答覆者和你自己提供了一些聲譽，但是沒有義務這樣做，但是，快樂的編碼！ – TAGraves

刷新數據表與新aaData值

回答

相關問題