[英]How do I display custom fields in the posts using types plug-in in wordpress
[英]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.