從ajax json填充數據表

我的表未填充。我可以看到，它是獲得正確的JSON從ajax json填充數據表

JSON數據接收是這樣的：

[ 
    { 
    "id": "1", 
    "name": "FooBar", 
    "predicted": "0", 
    "points": "1", 
    "section_id": "1", 
    "detail_alias": "" 
    ... 
    }, 
    ... 
]

HTML

<table id="example"></table>

$('#example').dataTable({ 
    "ajaxSource": "rest/index.php?m=foo", 
    "columns": [ 
     { "data": "id" }, 
     { "data": "name" }, 
     { "data": "detail_alias" }, 
     { "data": "points" } 
    ] 
});

所有我看到的我的瀏覽器是：

它顯示「正在加載...」，當網絡選項卡顯示該呼叫具有正確的數據200響應。

爲什麼不填充表？

來源

2016-09-26 smerny

https：// datatables。net/examples/data_sources/ajax.html - 你還看過文檔嗎？它看起來**非常**不同於你的例子。據此，至少可以說，你的數據結構是錯誤的。 – NoobishPro

是的，雖然這個文檔更符合我的需求：https：//datatables.net/reference/option/columns.data#Examples（你可以命名列以匹配數據） – smerny

我明白了。嗯，這是尷尬。我只有有限的數據表經驗，碰巧熟悉我鏈接的文檔。但是，我從來沒有見過你之前鏈接過的文檔，所以在這種情況下，我想我沒有什麼需要補充的，對不起！ – NoobishPro

所以在我的問題ajaxSource期待的數據被格式化爲這樣的：

{ data: [ { ...

而且我不想修改我的後端以這種格式發送數據，因爲這會在其他地方造成問題。我假設最終在本頁面上尋找解決方案的其他人可能會遇到同樣的問題。

我的解決辦法是通過jQuery.ajax()來獲取數據，然後將它傳遞給aaData場，就像這樣：

$.ajax({ 
    'url': "/rest/index.php?m=foo", 
    'method': "GET", 
    'contentType': 'application/json' 
}).done(function(data) { 
    $('#example').dataTable({ 
     "aaData": data, 
     "columns": [ 
      { "data": "id" }, 
      { "data": "name" }, 
      { "data": "detail_alias" }, 
      { "data": "points" } 
     ] 
    }) 
})

這讓我不必擔心從格式改變JSON數據這個問題。

無論如何，我更喜歡這種方式，因爲如果我想在同一時間修改或使用其他任何數據，它會給我更多的靈活性。

來源

2016-09-26 02:18:25 smerny

我認爲你必須以「aaData」的陣列

return dataTabledata['aaData'] = 'your json data'

默認情況下數據表將使用返回數據的「aaData」屬性，它是陣列與每一個項的數組返回你的JSON表中的列。

在你的jQuery創建Ajax將從您的服務器端

function getdtData(){ 
    /*clear table row first*/ 
    $('#sample').dataTable().fnDestroy(); 
    /*populate your datatable using ajax*/ 
    $('#sample').dataTable({ 
    "sDom": 'frtip', 
    "bServerSide": true, 
    /*server side source*/ 
    "sAjaxSource": "rest/index.php?m=foo", 
    /* we use sDom to specify the lenght of the pagination if you will using pagination in your data table*/ 
    "lengthMenu": [[ 5, 5], [ 5, 5]], 
    "aoColumnDefs": [ 
     { "aTargets": [ 0 ], "bSortable": false}, 
     { "aTargets": [ 1 ], "bSortable": false }, 
     { "aTargets": [ 2 ], "bSortable": false }, 
     { "aTargets": [ 3 ], "bSortable": false } 
    ] 
});

處理數據請參見本文檔http://legacy.datatables.net/usage/server-side

來源

2016-09-26 00:57:06 Paul

@smerny Yep享受編碼，雖然它有點混淆 – Paul

好的我會編輯我的答案 – Paul

好吧，我不想修改從服務器發送的數據，因爲這會弄亂一些其他的東西。我會給出一個+1，讓我可以找到適合我的解決方案。 – smerny

表不填充，因爲你必須在你沒有收到data對象JSON數據但引用它（data對象）用於顯示在表列中。

根據您的dataTable初始化，您的JSON數據應該是這樣的：

{"data":[ 
    { 
    "id": "1", 
    "name": "FooBar", 
    "predicted": "0", 
    "points": "1", 
    "section_id": "1", 
    "detail_alias": "" 
    ... 
    }, 
    ... 
]}

來源

2016-09-26 01:11:09 nyedidikeke

這會像我在我的評論中提到的那樣工作，但會要求我重寫一堆其他代碼，這些代碼並不期望「數據」字段。 'aaData'字段對我有用。 – smerny

您是否正在嘗試邊服務器處理？你可以通過更新你的文章分享你的腳本進行故障排除 – nyedidikeke

從ajax json填充數據表

回答

相關問題