簡體   English   中英

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

[英]How to display my JSON data into table using DataTable plug-in?

根據此處的文檔,我已經實現了服務器端代碼。

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>

回答這個問題的人們對這種方式的想法太多了。 當您正確設置選項時,數據表將處理輸出而不會出現任何花哨循環/分配/等情況。 假設您的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源已正確過濾。 例如,如果您發現應該得到10個結果時得到19個結果,那么您就會知道問題出在您的源頭,而不是jQuery中的問題。 在您的示例中,消息源說它將返回19個結果中的19個,並且尚未指定bPaginate,因此這就是分頁不起作用的原因。 aoColumns設置了您的頭,除非您確實願意,否則無需使用HTML。 其他功能在datatables網站上有詳盡的文檔說明,但是如果您感到困惑,則可以提問。

您可以循環遍歷'aaData'並直接使用fnAddData添加新行。

例如,在此處檢查: http : //datatables.net/examples/api/add_row.html

編輯:以及您的示例。

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

基本上就是這樣

似乎您應該在JSON中發送回正確的“ sEcho”變量。

DataTables需要了解有關發回數據的信息,以便能夠進行渲染。 您需要將已發送的值傳遞回DataTables。

sEcho在此處進行了描述: http ://datatables.net/usage/server-side

因此,要使您的示例作品將“ sEcho”更改為1或更好的寫法如下:

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

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM