datatable1.9.4 + .net mvcwebapi 分页

3 篇文章 0 订阅
3 篇文章 0 订阅

研究一周左右的时间。写出datatable1.9.4 + .net mvcwebapi ajax分页的方法。现给出代码注释,希望对大家有帮助。
先来张最终的效果图吧。最终的效果图
再来一张展开的。datatable行叠加的效果
下面是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 + '&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, 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

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值