研究一周左右的时间。写出datatable1.9.4 + .net mvcwebapi ajax分页的方法。现给出代码注释，希望对大家有帮助。
先来张最终的效果图吧。
再来一张展开的。
下面是JS代码：
var oTable = '';
$(function () {
getList();
});
/* 加载默认数据 各个选项就不多说了 看不明白的请到官网查询 */
function getList() {
oTable = $('#citytable')
.dataTable({
'bDeferRender': true,'bSort': false,'sPaginationType': 'full_numbers','iDisplayLength': 17,'bLengthChange': false,'bProcessing': true,'bServerSide': true,'bFilter': false,'sAjaxSource': '/api/Province','sServerMethod': 'GET','sAjaxDataProp': 'aaData','aoColumns': [
{
'sClass': 'details-control','mData': null,'sDefaultContent': '','sWidth': 50
},{
'aTargets': [1],'mDataProp': 'Id','fnRender': function (oObj,sVal) {
return sVal;
},'bSortable': false,'sWidth': 50
},{ 'mDataProp': 'Name','sWidth': 100 },{
'mDataProp': 'IsDel','mRender': function (data,type,full) {
var sReturn = '';
switch (data) {
case 0:
sReturn = '<span class="label label-success">使用中</span>';
break;
case 1:
sReturn = '<span class="label label-warning">停用</span>';
break;
default:
sReturn = '<span class="label label-danger">未知状态</span>';
break;
}
return sReturn;
},'sWidth': 100
},{ 'mDataProp': 'CList','bVisible': false },{
'sDefaultContent': '',sVal) {
return fnOperation(oObj.aData);
}
}],'oLanguage': {
'sUrl': '../../customjs/jquery.dataTable.cn.txt'
},'fnServerData': function (sUrl,aoData,fnCallback,oSettings) {
var postData = {
page: parseInt(aoData[3]['value']) + 1 <= 1 ? 1 : parseInt(aoData[3]['value']) / parseInt(aoData[4]['value']) + 1,rows: 17
};
oSettings.jqXHR = $.ajax({
'url': sUrl,'data': postData,'dataType': 'json','cache': false,'type': 'GET','success': fnCallback
});
}
});
/*展开*/
$('#citytable tbody').on('click','td.details-control',function () {
var nTr = $(this).parents('tr')[0];
if (oTable.fnIsOpen(nTr)) {
oTable.fnClose(nTr);
}
else {
oTable.fnOpen(nTr,fnFormatDetails(oTable,nTr),'');
$(this).removeClass('details-control');
$(this).addClass('details-controls');
}
});
/*关闭*/
$('#citytable tbody').on('click','td.details-controls',function () {
var nTr = $(this).parents('tr')[0];
if (oTable.fnIsOpen(nTr)) {
oTable.fnClose(nTr);
$(this).removeClass('details-controls');
$(this).addClass('details-control');
}
else {
oTable.fnOpen(nTr,'');
}
});
/*操作生成*/
function fnOperation(obj) {
var add = '<a data-toggle="modal" href="#showModal1" onclick="cityAdd(' + obj.Id + ')" class="label label-primary" style="font-weight:lighter;">增加新城市</a>';
var sub = '<a href="javascript:void(0);" id="subid' + obj.Id + '" onclick="sub(' + obj.Id + ')" class="label label-warning">停用</a>';
var sbb = '<a href="javascript:void(0);" id="subid' + obj.Id + '" onclick="sbb(' + obj.Id + ')" class="label label-info">启用</a>';
return obj.IsDel == 0 ? add + ' ' + sub : add + ' ' + sbb;
}
}
/* 重新加载数据 */
function reloadList() {
oTable.fnReloadAjax();
}
/* 具体城市信息 by zhangyu */
function fnFormatDetails(oTable,nTr) {
var aData = oTable.fnGetData(nTr);
var sTemp = '',i = 0;
var sOut = '<table id="pcity' + aData.Id + '" class="table table-condensed table-striped table-bordered pull-left table-hover">';
sOut += '<thead>';
sOut += '<tr>';
sOut += '<th width="5%">编号</th><th width="15%">城市名称</th><th width="5%">状态</th><th>操作</th>';
sOut += '</tr>';
sOut += '</thead>';
sOut += '<tbody>';
$.each(aData.CList,function (n,value) {
sTemp += '<tr>';
sTemp += '<td>' + aData.CList[i].Id + '</td>';
sTemp += '<td>' + aData.CList[i].Name + '</td>';
sTemp += aData.CList[i].IsDel == 0 ? '<td name="cstatus' + aData.CList[i].Id + '"><span class="label label-success">使用中</span></td>' : '<td name="cstatus"><span class="label label-danger">停用</span></td>';
sTemp += aData.CList[i].IsDel == 0 ? '<td name="cctrl' + aData.CList[i].Id + '"><a href="javascript:void(0);" onclick="cityClose(' + aData.Id + "," + aData.CList[i].Id + ')" class="label label-warning">停用</a></td>' : '<td name="cctrl"><a href="javascript:void(0);" onclick="cityOpen(' + aData.Id + "," + aData.CList[i].Id + ')" class="label label-primary">启用</a></td>';
sTemp += '</tr>';
i++;
});
sOut += '</tbody>'
sOut += sTemp;
sOut += '</table>';
sTemp = '';
i = 0;
return sOut;
}
/* 查询 by zhangyu */
function search() {
var oSettings = oTable.fnSettings();
oSettings._iDisplayLength = 10;
oSettings._iDisplayStart = 0;//这个地方要注意了一定要写上 不然会出现意想不到的效果 呵呵。
oSettings.fnServerData = function (sUrl,oSettings) {
var number = parseInt(aoData[3]['value']) / parseInt(aoData[4]['value']);//这个也是
var postData = {
page: parseInt(parseInt(aoData[3]['value']) / parseInt(aoData[4]['value'])) != number ? 1 : parseInt(aoData[3]['value']) / parseInt(aoData[4]['value']) + 1,//这个是当前页 因为查询后要重载所以要这样写
rows: 10//分页条数
};//这个是要查询传过去的参数 随便写多少都行 可以理解为重新加载时的查询条件。
oSettings.jqXHR = $.ajax({
'url': sUrl,'dataFilter': function (data,type) {
return data;
},'success': fnCallback
});
}
oTable.fnReloadAjax();
}
2015-11-2补：fnReloadAjax()方法如下：
$.fn.dataTableExt.oApi.fnReloadAjax = function (oSettings,sNewSource,bStandingRedraw) {
if (sNewSource !== undefined && sNewSource !== null) {
oSettings.sAjaxSource = sNewSource;
}
// Server-side processing should just call fnDraw
if (oSettings.oFeatures.bServerSide) {
this.fnDraw();
return;
}
this.oApi._fnProcessingDisplay(oSettings,true);
var that = this;
var iStart = oSettings._iDisplayStart;
var aData = [];
this.oApi._fnServerParams(oSettings,aData);
oSettings.fnServerData.call(oSettings.oInstance,oSettings.sAjaxSource,aData,function (json) {
/* Clear the old information from the table */
that.oApi._fnClearTable(oSettings);
/* Got the data - add it to the table */
var aData = (oSettings.sAjaxDataProp !== "") ?
that.oApi._fnGetObjectDataFn(oSettings.sAjaxDataProp)(json) : json;
for (var i = 0 ; i < aData.length ; i++) {
that.oApi._fnAddData(oSettings,aData[i]);
}
oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
that.fnDraw();
if (bStandingRedraw === true) {
oSettings._iDisplayStart = iStart;
that.oApi._fnCalculateEnd(oSettings);
that.fnDraw(false);
}
that.oApi._fnProcessingDisplay(oSettings,false);
/* Callback user function - for event handlers etc */
if (typeof fnCallback == 'function' && fnCallback !== null) {
fnCallback(oSettings);
}
},oSettings);
};
