如何使用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数据显示到表中？

回答

相关问题