我有一些問題在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個條目中篩選出來)
這顯示新行已經創建但僅僅不顯示。
有沒有人有任何關於錯誤發生的原因以及爲什麼新行在表中不可見?我無法從錯誤消息中得出任何有用的信息。我所有的嘗試都涉及到根據我在文檔中找到的各種不同的輸入數據方式來改變下面的行,但是我沒有運氣。
你是如何加載的初始數據? – Rickkwa
我認爲這個問題是因爲你正在初始化一個以數據源爲參數的函數內的數據表。調用'draw'可能因此而失敗。 – markpsmith
數據最初通過一個函數運行,該函數運行返回數組的getJSON請求,然後使用請求返回的數據運行initiliseNotesTable。 我不認爲這是導致這種失敗的繪圖函數,因爲我試圖在沒有.draw()鏈接的情況下運行相同的行,並且我得到了相同的錯誤。 – Suipaste