datatable1.9.4 + .net mvcwebapi 分页

研究一周左右的时间。写出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 + '&nbsp;&nbsp;' + sub : add + '&nbsp;&nbsp;' + 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);
};

到此这个普通分页+查询分页就写好了。大家可以试试 保证质量。有问题请加Q：80704820