如何使用DataTable插件將我的JSON數據顯示到表中？

根據文檔here，我已經實現了服務器端代碼。如何使用DataTable插件將我的JSON數據顯示到表中？

JS代碼

$('#datatable_paging').dataTable({ 
     "bProcessing": true, 
     "bServerSide": true, 
     "sAjaxSource": "#### my php file path ####", 
});

我得到JSON數據

{ 
    "sEcho": 0, 
    "iTotalRecords": 19, 
    "iTotalDisplayRecords": "19", 
    "aaData": [ 
     ["1", "peter", "[email protected]"], 
     ["2", "john", "[email protected]"], 
     ["3", "raj", "[email protected]"], 
     ["4", "selvin", "[email protected]"], 
     ["5", "ismail", "[email protected]"], 
     ["6", "muadth", "[email protected]"], 
     ["7", "ahmed", "[email protected]"], 
     ..... 
    ] 
}

現在我需要在下面的表格與數據表分頁顯示此JSON結果

HTML代碼

<table id="datatable_paging"> 
     <thead> 
      <tr> 
      <th>Id </th> 
      <th>Name</th> 
      <th>E-mail</th>     
      </tr> 
     </thead>    
    </table>

來源

2012-12-06 iLaYa ツ

不要通過詳細的代碼更改來收聽答案（他們沒有閱讀顯示幾乎相同的代碼的鏈接？）。你在上面做的事情基本上是正確的，只是要弄清楚細節出錯的地方。你確認數據是以JSON形式返回的（檢查實際返回的數據，不僅僅是你認爲PHP的輸出是什麼），還是上面的示例只是一個假設？你是否通過JSON Lint運行它以確保它是有效的？ –

@ GregPettit-我用JSON lint檢查了JSON代碼，它是有效的json。現在我不知道如何將這個JSON數據顯示到表格中。我浪費了時間與'samba penugonda'回答 –

人回答這個問題過於得太多太多這樣。當您正確設置選項時，Datatables將處理輸出，而無需任何花哨的循環/分配等。假設你的JSON回報是正確的，如規範描述：

HTML：

<table id="datatable_paging"></table>

然後jQuery的：

var oTable = $('#datatable_paging').dataTable({   
     "bDestroy":true, 
     "bStateSave": true, 
     "aaSorting": [[1, "asc"]], 
     "bProcessing": true, 
     "bServerSide": true, 
     "sAjaxSource": "#### my php file path ####", 
     "bJQueryUI": true, 
     "bAutoWidth": false, 
     "bFilter":true, 
     "bLengthChange": true, 
     "bPaginate": true, 
     "bSort": true, 
     "iDisplayLength": 10, 
     "bInfo": true, 
     "sPaginationType": "full_numbers", 
     "aoColumns": [ 
      { "sTitle": "Id", "sWidth": "33%"}, 
      { "sTitle": "Name", "sWidth": "33%"}, 
      { "sTitle": "Email", "sWidth": "33%"} 
     ] 
    })

尋呼等將是正確安裝，假設你PHP源代碼正確過濾，因爲它應該。例如，如果你發現自己得到了19個結果，那麼你應該知道問題出在你的源頭上，而不是在jQuery中。在你的例子中，源代碼說它從19中返回總共19個結果，並且bPaginate沒有被指定，所以這就是爲什麼分頁不起作用。 aoColumns設置你的頭，除非你真的想，否則不需要用HTML做。其他功能在數據表站點上已有詳細記錄，但如果您感到困惑，請提問。

來源

2012-12-06 18:16:24 bpeterson76

這是我的預期。噸感謝:-) –

你可以循環訪問'aaData'並直接用fnAddData添加新行。

入住這裏例如：http://datatables.net/examples/api/add_row.html

編輯：一種你比如爲好。

var aaData = theVariableHoldingTheJsonObject.aaData; 
$("#datatable_paging").dataTable().fnAddData (aaData)

這基本上

來源

2012-12-06 05:32:41 Jesperhag

我上面發佈的JSON數據是正確的還是什麼？現在它顯示'DataTables警告（表id ='datatable_paging'）：DataTables警告：來自服務器的JSON數據無法解析。這是由JSON格式錯誤導致的。「 –

JSON對象對我來說看起來很好。你能檢查你的控制檯（firedebugger，督察或類似的東西），並檢查是否正確提取ajax資源？ – Jesperhag

好像你應該在JSON發送回一個正確的「sEcho」變量。

這是一個數據表需要知道發送的數據後面，爲了能呈現的信息。您需要將發送的值傳回給DataTables。

sEcho這裏描述：http://datatables.net/usage/server-side

所以讓你的榜樣工程變「sEcho」 1或更好寫這樣的：

"sEcho": int(request.vars['sEcho']) #python code

來源

2012-12-06 16:12:43 Smiter

如何使用DataTable插件將我的JSON數據顯示到表中？

回答

相關問題