關於Jquery datatable動態載入資料心得
阿新 • • 發佈:2019-01-31
在使用Jquery Datatable控制元件對列表頁面進行分頁,一直搞不清楚傳入後臺的值裡面怎麼獲取pageNumber的值,後面一直監控aoData的json欄位,終於發現,iDisplayStart這個屬性就是頁面內容起始條數,可以根據iDisplayStart和定義的pageSize,可以計算出pageNumber,這樣可以在後臺做分頁。上程式碼:
$(document).ready(function() { $('#listTable').dataTable( { "bPaginate" : true, "bFilter" : false, "bProcessing" : true, "bLengthChange" : false, "bServerSide" : true, "bAutoWidth" : true, "sAjaxSource" : sAjaxSource, "sPaginationType" : "full_numbers", "fnServerData" : retrieveData,
"aoColumns" : columns, "oLanguage" : { //漢化 "sLengthMenu" : "每頁顯示 _MENU_ 條記錄", "sZeroRecords" : "沒有檢索到資料", "sInfo" : "當前資料為從第 _START_ 到第 _END_ 條資料;總共有 _TOTAL_ 條記錄", "sInfoEmtpy" : "沒有資料", "sProcessing" : "正在載入資料...", "oPaginate" : { "sFirst" : "首頁", "sPrevious" : "前頁", "sNext" : "後頁", "sLast" : "尾頁" } } }); }); function retrieveData(sSource, aoData, fnCallback) { //組合查詢條件 var searchArray = $('#searchForm').serialize(); searchArray = searchArray + "&iDisplayStart=" + aoData[3].value $.ajax( { "type" : "post", "url" : sSource, //引數組合 "data" : searchArray, //以json格式傳遞 "success" : function(data) { if (data.result == 'error') { alert(data.message); } else { var aoData = { sEcho : "test", aaData : data.dataList, iTotalDisplayRecords : data.total, iTotalRecords : data.display }; fnCallback(aoData);} } }); } //重新整理列表 function refreshList() { $("#listTable").dataTable().fnPageChange('refresh'); } //刪除資訊 function del(data) { //刪除 jConfirm('是否確定刪除編號為' + data + "的記錄?", '退出', function(r) { if (r) { $.ajax( { "type" : "post", "url" : delSource, //引數組合 "data" : "id=" + data, //以json格式傳遞 "success" : function(data) { if (data.result == 'error') { alert(data.message); } else { alert(data.message); refreshList(); } } }); } }); } function view(data) { //檢視 } function update(data) { //編輯 }
var columns = new Array(
{//表字段說明
"mData" : "NAME",
"sClass" : "center"
},
{
"mData" : "ID",
"sClass" : "center"
},
{
"mData" : "STATUS",
"sClass" : "center"
},
{
"mData" : "ORDER_NUMBER",
"sClass" : "center"
},
{
"mData" : "PARENT_ID",
"sClass" : "center"
},
{
'mData' : 'ID',
'sClass' : 'center',
"mRender" : function(data, type, full) {
var operStr = '<a class="viewBtn" for="'
+ data
+ '" onclick="view(\''
+ data
+ '\')"><img src="../pages/images/tick.png" title="view" alt="view" style="border:none"></a> ';
operStr += '<a class="viewBtn" for="'
+ data
+ '" onclick="update(\''
+ data
+ '\')"><img src="../pages/images/page_edit.png" title="edit" alt="edit" style="border:none"></a> ';
operStr += '<a class="viewBtn" for="'
+ data
+ '" onclick="del(\''
+ data
+ '\')"><img src="../pages/images/cross.png" title="del" alt="del" style="border:none"></a>';
return operStr;
}
});
//配置處理類
var sAjaxSource = "testJson";//獲取資料
var delSource = "delTest";// 刪除
var viewSource = "";//檢視
var editSource = "";//編輯
後臺頁面把
dataList
total
display這些值做成一個JSON返回就可以了