1. 程式人生 > >關於Jquery datatable動態載入資料心得

關於Jquery datatable動態載入資料心得

在使用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返回就可以了