研究一周左右的时间。写出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': '', 'fnRender': function (oObj, 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, fnFormatDetails(oTable, 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, aoData, fnCallback, 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,
'data': postData,
'dataType': 'json',
'cache': false,
'type': 'GET',
'dataFilter': function (data, type) {
return data;
},
'success': fnCallback
});
}
oTable.fnReloadAjax();
}
2015-11-2补:fnReloadAjax()方法如下:
$.fn.dataTableExt.oApi.fnReloadAjax = function (oSettings, sNewSource, fnCallback, 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);
};
到此这个普通分页+查询分页就写好了。大家可以试试 保证质量。有问题请加Q:80704820