0

根据此处的文档，我已经实现了服务器端代码。

JS代码

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

我将 JSON 数据作为

{
    "sEcho": 0,
    "iTotalRecords": 19,
    "iTotalDisplayRecords": "19",
    "aaData": [
        ["1", "peter", "peter@gmail.com"],
        ["2", "john", "john@yahoo.com"],
        ["3", "raj", "raj@in.com"],
        ["4", "selvin", "selvin@gmail.com"],
        ["5", "ismail", "ismail@gmail.com"],
        ["6", "muadth", "muad@hotmail.com"],
        ["7", "ahmed", "ahmed@gmail.com"],
       .....
    ]
}

现在我需要使用 Datatable 分页在下表中显示这个 JSON 结果

HTML 代码

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

3 回答 3

3

回答这个问题的人想得太多了。当您正确设置选项时，数据表将处理输出而无需任何花哨的循环/分配/等。假设您的 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 个结果，而你应该得到 10 个，你就会知道问题出在你的源头上，而不是在 jQuery 中。在您的示例中，消息来源说它返回 19 个总结果中的 19 个并且未指定 bPaginate，因此这就是分页不起作用的原因。aoColumns 设置你的头脑，除非你真的想要，否则不需要在 HTML 中做。其他功能在数据表网站上有详细的记录，但如果您感到困惑，请提出问题。

于 2012-12-06T18:16:24.177 回答
0

您可以循环遍历“aaData”并直接使用 fnAddData 添加新行。

在这里查看例如：http ://datatables.net/examples/api/add_row.html

编辑：也是你的一个例子。

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

基本上就是这样

于 2012-12-06T05:32:41.450 回答
0

看来您应该在 JSON 中发回正确的“sEcho”变量。

这是 DataTables 需要知道的关于被发送回的数据的信息，以便能够呈现。您需要将发送的值传回 DataTables。

此处描述了 sEcho：http: //datatables.net/usage/server-side

因此，为了让您的示例作品将“sEcho”更改为 1 或更好地编写如下：

"sEcho": int(request.vars['sEcho'])   #python code
于 2012-12-06T16:12:43.077 回答