2015-04-23 71 views
0

我有一些問題在ajax成功響應中向數據表中添加新行。我瀏覽了文檔並進行了搜索,但找不到類似於我的問題的任何內容。datatables在ajax響應內添加行

我的表被初始化像這樣和精細的渲染:

function initiliseNotesTable(pNotesData) { 
    notesTable = $('#notesTable') 
     .DataTable({ 
      searching: false, 
      "bLengthChange": false, 
      "bPaginate": true, 
      "bDestroy": true, 
      "data": pNotesData, 
      "columns": [{ 
       "title": "Date", 
       "data": "dateTime.toDateString()" 
      }, { 
       "title": "User", 
       "data": "userName" 
      }, { 
       "title": "Type", 
       "data": "categoryDescription" 
      }, { 
       "title": "Note", 
       "data": "text" 
      }] 
     }); 
} 

當我想要一個新的行添加到我的數據發送到服務器使用Ajax表。

 $.ajax({ 
     type: "POST", 
     url: 'rest/maintain-note/', 
     data: newNote, 
     success: function(data) { 
      notesTable.row.add(data).draw(); 
     }, 
     dataType: 'json', 
      contentType: 'application/json' 
    }); 

成功返回的數據與用於構造表的數據的形狀完全相同,除了它是單個對象而不是數組。

categoryDescription: "TestType" 
categoryID: "5575" 
dateTime: 1429787295644 
entityID: "1234544950" 
entityTypeID: "111" 
lockID: null 
sequence: null 
text: "test" 
userName: "Test" 

然而,當我達到notesTable.row.add(數據).draw();控制檯會產生錯誤,表格不會更改。該錯誤是下面:

Uncaught TypeError: data[a[i]] is not a functionfetchData @  jquery.dataTables.js:1277(anonymous function) @ jquery.dataTables.js:1293oCol.fnGetData @ jquery.dataTables.js:702_fnGetCellData @ jquery.dataTables.js:1112_fnCreateTr @ jquery.dataTables.js:1694_fnAddData @ jquery.dataTables.js:1037(anonymous function) @ jquery.dataTables.js:7893_Api.iterator @ jquery.dataTables.js:6868(anonymous function) @ jquery.dataTables.js:7889(anonymous function) @ jquery.dataTables.js:7031$.ajax.success @ notes.js:138jQuery.Callbacks.fire @ jquery.js:3048jQuery.Callbacks.self.fireWith @ jquery.js:3160done @ jquery.js:8235jQuery.ajaxTransport.send.callback @ jquery.js:8778 

但是,如果你再更改PAGINATE頁面總喜歡行價值變動這樣:

從 顯示11至102的20項

要 顯示11 102個條目中的20個(從103個條目中篩選出來)

這顯示新行已經創建但僅僅不顯示。

有沒有人有任何關於錯誤發生的原因以及爲什麼新行在表中不可見?我無法從錯誤消息中得出任何有用的信息。我所有的嘗試都涉及到根據我在文檔中找到的各種不同的輸入數據方式來改變下面的行,但是我沒有運氣。

+0

你是如何加載的初始數據? – Rickkwa

+0

我認爲這個問題是因爲你正在初始化一個以數據源爲參數的函數內的數據表。調用'draw'可能因此而失敗。 – markpsmith

+0

數據最初通過一個函數運行,該函數運行返回數組的getJSON請求,然後使用請求返回的數據運行initiliseNotesTable。 我不認爲這是導致這種失敗的繪圖函數,因爲我試圖在沒有.draw()鏈接的情況下運行相同的行,並且我得到了相同的錯誤。 – Suipaste

回答

1

嘗試改變日期列於以下:

{ 
    "title": "Date", 
    "data": "dateTime", 
    "render": function(timestamp) { 
     return new Date(timestamp).toDateString() 
    } 
} 

我從"data" : "dateTime.toDateString()"末端除去.toDateString(),和所使用的render選項來代替。

有關渲染選項的詳細信息,請參閱文檔: https://datatables.net/reference/option/columns.render

+0

我沒有意識到渲染參數,看起來很整潔。很快就會嘗試,先做一些其他的工作來排序。 – Suipaste

+0

幾天後纔開始嘗試。它解決了這個問題,並在結構上將數據定義從渲染看起來很整齊。我在我的網站上使用了大量的數據表,所以這是一個很好的學習信息。謝謝。 – Suipaste