MVC如何使用开源分页插件shenniu.pager.js

喜欢ヅ旅行 2022-07-14 10:17 166阅读 0赞

最近比较忙，前期忙公司手机端接口项目，各种开发+调试+发布现在几乎上线无问题了；虽然公司项目忙不过在期间抽空做了两件个人觉得有意义的事情，一者使用aspnetcore开发了个人线上项目（要说线上其实只能ip访问，没有域名哈哈），其架构组成由： **aspnetcore1.0.0+redis+ postgressql+TaskMainForm服务**，这个项目在后期会开源出来供大家分享学习，站点地址点这里 **心声网**；一者是目前正在做的后台管理框架 **一叶子**，现目前刚好吧js分页插件shenniu.pager.js写完，个人觉得还是可以的，这也是本章将要和大家分享的内容；那么开始今天的分享内容，希望各位多多扫码支持：

**. 为什么采用js分页及效果图**

**　　. 在view中如何使用及分享个后台方法**

**　　. 开发者视角阅读shenniu.pager.js代码**

下面一步一个脚印的来分享：

**. 为什么采用js分页及效果图**

首先，咋们来了解下市面上mvc两种常用的分页方式：跳转分页和ajax分页；**跳转分页**意思就是页面**重定向**到指定的页面并通过传递分页需要的参数，从而获取数据后通过Modal来绑定数据，这个每次都会刷下页面体验上不是很好；**ajax分页**通过异步js请求某个接口，然后从接口获取到数据后，再赋值到展示的界面上，这种方式是不会刷新页面，从而保证了用户体验；

下面来看下这次分享的js分页插件效果图：

图一：

![348819-20161206121510366-1175685579.png][]

图二：

![348819-20161206121534241-1518179067.png][]

图三：

![348819-20161206121550147-2005604639.png][]

看效果图好像看不出来什么东西，我只能说没办法，以后争取弄个gif动态图片吧，后面代码才是关键

**. 在view中如何使用及分享个后台方法**

首先，为了页面样式好看我使用了bootstrap+ace样式框架，样式效果就是如上面几张图所示(这里是样式和js文件)；由于该插件是采用jquery格式书写的所以需要引用jquery.js，如上面图所示使用到了日期选择框，因为我采用的样式都是基于h5的设计所以这里引用的日期选择插件bootstrap-datepicker.min.js和她的样式bootstrap-datepicker3.min.css；该实例需要的引用文件都好了，下面看下截图：

![348819-20161206122732913-2133653438.png][]

再来，咋们就开始使用shenniu.pager.js,我们需要在点击“查询”按钮的时候去调用这个插件，然后通过插件去获取后台接口返回的数据，并绑定到页面展示出来，所以有了如下代码：

![复制代码][copycode.gif]

1  var snTool = new shenniuTool();
     2 
     3         $("button[id='btnSearch']").on("click", function () {
     4 
     5             var data = {
     6                 txtName: $("input[name='txtName']").val(),
     7                 nStatus: $("select option:selected").val(),
     8                 dOperateTime: $("input[name='dOperateTime']").val()
     9             };
    10 
    11             snTool.listFun({
    12                 showId: "divShowResult",  //内容显示的div的Id
    13                 url: "/Menu/Search",
    14                 data: data,
    15                 pageSize: 2,  //每页N条
    16                 headText: [
    17                     { nickName: "全选", name: "Id", colType: "checkbox" },
    18                     { nickName: "名称", name: "Name", colType: "label", isModalHeadText: true },
    19                     { nickName: "链接", name: "Link" },
    20                     { nickName: "状态", name: "EnableDes" },
    21                     { nickName: "操作人", name: "OperatorDes" },
    22                     { nickName: "操作时间", name: "OperateTime", format: "yyyy-MM-dd" },
    23                     { nickName: "操作", name: "Id", colType: "operate" }
    24                 ],
    25                 editeOption: {
    26                     url: "/Menu/Edit",
    27                     title: "编辑",
    28                     height: 500
    29                 },
    30                 viewOption: {
    31                     url: "/Menu/Details",
    32                     title: "查看",
    33                     height: 500
    34                 },
    35                 delOption: {
    36                     url: "/Menu/Delete",
    37                     title: "删除",
    38                     height: 500
    39                 },
    40                 modalExt: modalExt
    41             });
    42         });

![复制代码][copycode.gif]

注意参数url: "/Menu/Search"，这个指向的就是后台接口，那么咋们来看下我后台咋们写的:

![复制代码][copycode.gif]

1 [HttpGet]
     2         public JsonResult Search()
     3         {
     4             var moPageResult = new StageModel.MoPageResult<dynamic>();
     5 
     6             try
     7             {
     8 
     9                 var txtName = Request.Params["txtName"];
    10                 var nStatus = string.IsNullOrWhiteSpace(Request.Params["nStatus"]) ? -1 : Convert.ToInt32(Request.Params["nStatus"]);
    11                 var dOperateTime = string.IsNullOrWhiteSpace(Request.Params["dOperateTime"]) ? Convert.ToDateTime("1991-01-01") : Convert.ToDateTime(Request.Params["dOperateTime"]);
    12                 var data = db.MoMenus.AsQueryable();
    13                 if (!string.IsNullOrWhiteSpace(txtName))
    14                 {
    15                     data = data.Where(b => b.Name.Contains(txtName));
    16                 }
    17                 if (nStatus >= 0)
    18                 {
    19                     data = data.Where(b => b.IsEnable == (nStatus == (int)StageEnumHelper.ComStatus.启用));
    20                 }
    21                 if (dOperateTime > Convert.ToDateTime("1991-01-01"))
    22                 {
    23                     data = data.Where(b => b.OperateTime >= dOperateTime && b.OperateTime < dOperateTime.AddDays(1));
    24                 }
    25 
    26                 moPageResult.MoPageContent(
    27                     data,
    28                     b => b.OperateTime,
    29                     b => new
    30                     {
    31                         Id = b.Id,
    32                         Name = b.Name,
    33                         Link = b.Link,
    34                         Des = b.Des,
    35                         IsEnable = b.IsEnable,
    36                         Operator = b.Operator,
    37 
    38                         OperatorDes = b.MoUserInfo.NickName,
    39                         EnableDes = b.IsEnable ? "启用" : "禁用",
    40                         OperateTime = b.OperateTime
    41                     });
    42 
    43             }
    44             catch (Exception ex)
    45             {
    46             }
    47             return Json(moPageResult, JsonRequestBehavior.AllowGet);
    48         }

![复制代码][copycode.gif]

后台接口Request.Params获取的几个参数就是从前端

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>var</code> 
      <code> data = { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>txtName: $(</code> 
      <code>"input[name='txtName']"</code> 
      <code>).val(),</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>nStatus: $(</code> 
      <code>"select option:selected"</code> 
      <code>).val(),</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>dOperateTime: $(</code> 
      <code>"input[name='dOperateTime']"</code> 
      <code>).val()</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>};</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

传递过来的，分别代码了视图中的名称，状态，操作时间等查询条件；下面来看下，后台这儿没有看到获取类似分页的当前页数和分页记录数的操作，是封装到了MoPageResult类中的MoPageContent()中，来看下MoPageResult类代码如：

![复制代码][copycode.gif]

1 #region  分页数据返回
     2 
     3         public class MoPageResult<TResult> where TResult : class, new()
     4         {
     5 
     6             public MoPageResult()
     7             {
     8              
     9             }
    10 
    11             public IQueryable<TResult> MoResult;
    12 
    13             /// <summary>
    14             /// 总页数
    15             /// </summary>
    16             public int PageTotal { get; set; }
    17 
    18 
    19             /// <summary>
    20             /// 当前页数
    21             /// </summary>
    22             public int CurrentPage { get; set; }
    23 
    24             /// <summary>
    25             /// 分页记录数
    26             /// </summary>
    27             public int PageSize { get; set; }
    28 
    29             /// <summary>
    30             /// 分页方法
    31             /// </summary>
    32             /// <typeparam name="TKey"></typeparam>
    33             /// <param name="query"></param>
    34             /// <param name="order_desc"></param>
    35             public void MoPageContent<T, TKey>(IQueryable<T> query, Expression<Func<T, TKey>> desc, Expression<Func<T, TResult>> selector = null, bool isDesc = true) where T : class,new()
    36             {
    37 
    38                 if (HttpContext.Current == null) { return; }
    39                 var Request = HttpContext.Current.Request;
    40 
    41                 this.PageSize = string.IsNullOrWhiteSpace(Request.Params["pageSize"]) ? 15 : Convert.ToInt32(Request.Params["pageSize"]);
    42                 this.CurrentPage = string.IsNullOrWhiteSpace(Request.Params["currentPage"]) ? 1 : Convert.ToInt32(Request.Params["currentPage"]);
    43 
    44                 var nTotal = query.Count();
    45                 this.PageTotal = nTotal / this.PageSize + (nTotal % this.PageSize > 0 ? 1 : 0);
    46 
    47                 if (selector != null)
    48                 {
    49                     if (isDesc)
    50                     {
    51                         query = query.OrderByDescending(desc);
    52                     }
    53                     else
    54                     {
    55                         query = query.OrderBy(desc);
    56                     }
    57                     this.MoResult = query.
    58                              Skip((this.CurrentPage - 1) * this.PageSize).
    59                              Take(this.PageSize).
    60                              Select(selector);
    61                 }
    62             }
    63 
    64         }
    65 
    66         #endregion

![复制代码][copycode.gif]

MoPageContent()中默认是获取了pagesize，currentpage参数，这样减少了用户操作性，并且此方法承担了计算总页数和执行分页语句的角色，注意最后查询语句**Select(selector)**，selector是**Expression<Func<T, TResult>>**类型，这个T有条件约束**where T : class,new()**；我在调用该分页类的使用传递的**T是dynamic**，因为赖人如我觉得匿名类更方便；唯一遗憾的是select输出暂时无法直接对某个属性直接使用方法；

最后，插件使用还需要注意一个地方，就是时间，如果后台不处理时间直接DateTime的json格式化，那么在插件获取出来的时间格式如：

![348819-20161206130627866-1558743696.png][]

这个时候就需要在使用shenniu.pager.js插件时候在属性**headText**中，指定时间列的格式如：

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>{ nickName: </code> 
      <code>"操作时间"</code> 
      <code>, name: </code> 
      <code>"OperateTime"</code> 
      <code>, format: </code> 
      <code>"yyyy-MM-dd"</code> 
      <code> }</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

使用format格式化时间格式，这个插件兼容的给有：yyyy,MM,dd,HH,mm,ss，相信满足大家需要了；

**. 开发者视角阅读shenniu.pager.js代码**

首先，我们从上而下，映入眼帘的是**插件属性**:

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

var defOption = {
    
            showId: "divShowResult",  //内容显示的div
            url: "",   //ajax数据来源地址
            headText: [
                { nickName: "A", colType: "checkbox", name: "Id" },
                { nickName: "B", colType: "label", name: "Name", isModalHeadText: true }   //isModalHeadText:是否是模式窗体头部显示的信息
            ],
            data: {},  //查询条件
            editeOption: {
                url: "",
                title: "编辑",
                width: 500,
                height: 500
            }, //编辑地址，不包括id
            viewOption: {
                url: "",
                title: "查看",
                width: 500,
                height: 500
            }, //查看地址
            delOption: {
                url: "",
                title: "删除",
                width: 500,
                height: 500
            }, //删除地址
    
            currentPage: 1,  //当前页数
            pageSize: 15,  //分页记录数
            showPageTab: 6, //展示6个页数
            modalExt: null, //模式窗体对象
    
            //可忽略
            callback: function () { }, //回调函数
            tabId: "tab001",
            loading: "努力加载中，等会吧...", //可以直接写出<img src=''/>
            sucFun: function (data) { },
            befFun: function () { },
            errFun: function () { },
            comFun: function () { },
            timeout: 60000 //超时60S
        };
    
        $.extend(defOption, option);

里面已经包括了注释说明，看起来应该不是问题； $.extend(defOption, option); 这段代码意思是吧用户传递进来的参数和插件里面默认的参数合并，用户大于插件直接可以覆盖相同属性的值；

再来，看**请求后台**的方法：

![复制代码][copycode.gif]

1 //请求后台
     2     function ajaxFun(option) {
     3 
     4         if (option) {
     5             $.extend(defOption, option);
     6         }
     7 
     8         //获取分页参数
     9         var hidPageSize = defOption.pageSize;
    10         var hidCurrentPage = defOption.currentPage;
    11 
    12         if ($("form input[name='pageSize']").val()) {
    13             hidPageSize = $("form input[name='pageSize']").val();
    14         }
    15         if ($("form input[name='currentPage']").val()) {
    16             hidCurrentPage = $("form input[name='currentPage']").val();
    17         }
    18 
    19         //合并用户查询条件和分页参数条件
    20         var searchData = {
    21             pageSize: hidPageSize,
    22             currentPage: hidCurrentPage
    23         };
    24         $.extend(searchData, defOption.data);
    25         //请求后台数据
    26         $.ajax({
    27 
    28             url: defOption.url,
    29             type: "get",
    30             data: searchData,
    31             dataType: "json",
    32             timeout: defOption.timeout,
    33 
    34             async: true,
    35             beforeSend: defOption.befFun,
    36             success: defOption.sucFun,
    37         });
    38     }

![复制代码][copycode.gif]

这个方法就是请求接口获取数据的方法，里面默认获取了页面中的pageSize，currentPage两个分页所需要的参数，这里采用的是get方式来请求，当然可以写成post，不过需要后台支持post就行了；

我们再看**查询列表方法**：

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

1 //查询列表
      2         listFun: function (option) {
      3 
      4             if (option) {
      5                 $.extend(defOption, option);
      6             }
      7 
      8             //默认格式
      9             var tab = [];
     10             tab.push('<table id="' + defOption.tabId + '" class="table  table-bordered table-hover">');
     11             tab.push('<thead><tr role="row">');
     12 
     13             for (var i in defOption.headText) {
     14 
     15                 var head = defOption.headText[i];
     16 
     17                 if (head.colType == "label") {
     18                     tab.push('<th class="center" tabindex="0" rowspan="1" colspan="1">' + head.nickName + '</th>');
     19                 } else if (head.colType == "checkbox") {
     20                     tab.push('<th class="center " rowspan="1" colspan="1" aria-label="">');
     21                     tab.push('    <label class="pos-rel">');
     22                     tab.push('        <input type="checkbox" name="cbAll" class="ace">');
     23                     tab.push('        <span class="lbl">' + head.nickName + '</span>');
     24                     tab.push('     </label>');
     25                     tab.push('</th>');
     26                 } else {
     27                     tab.push('<th class="center" tabindex="0" rowspan="1" colspan="1">' + head.nickName + '</th>');
     28                 }
     29             }
     30             tab.push('</tr></thead>');
     31             tab.push('<tbody><tr><td class="text-center" colspan="' + defOption.headText.length + '">' + defOption.loading + '</td></tr></tbody>');
     32             tab.push('</table>');
     33             tab.push('<div id="divPager" class="text-center"></div>');
     34             $("#" + defOption.showId).html(tab.join(''));
     35             //全选事件
     36             $("input[type='checkbox'][name='cbAll']").on("click", function () {
     37 
     38                 var cbStatus = $(this).is(":checked");
     39                 if (cbStatus) {
     40                     $("input[name='cb']:checkbox").prop("checked", true);
     41                 } else {
     42                     $("input[name='cb']:checkbox").prop("checked", false);
     43                 }
     44             });
     45 
     46             //数据返回成功处理
     47             defOption.sucFun = function (data) {
     48 
     49                 var head = $("table[id='" + defOption.tabId + "'] tbody");
     50                 if (data) {
     51                     if (data.MoResult) {
     52                         //遍历table展示的数据
     53                         var rows = [];
     54                         $.each(data.MoResult, function (i, item) {
     55                             rows.push('<tr>');
     56 
     57                             var modalHeadText = "";
     58                             for (var h_i in defOption.headText) {
     59                                 var head = defOption.headText[h_i];
     60                                 var item_val = item[head.name];
     61                                 if (item_val && typeof (item_val) != "undefined") { } else { item_val = ""; }
     62 
     63                                 //时间格式化
     64                                 if (head.format && item_val.length > 0) {
     65                                     console.log(item_val);
     66                                     var date = new Date(parseInt(item_val.replace("/Date(", "").replace(")/", ""), 10));
     67                                     item_val = head.format.
     68                                                 replace("yyyy", date.getFullYear()).
     69                                                 replace("MM", date.getMonth() + 1).
     70                                                 replace("dd", date.getDate()).
     71                                                 replace("HH", date.getHours()).
     72                                                 replace("mm", date.getMinutes()).
     73                                                 replace("ss", date.getMilliseconds());
     74                                 }
     75 
     76                                 //获取模式窗体头部信息
     77                                 if (modalHeadText.length <= 0) { modalHeadText = head.isModalHeadText ? item_val : "" };
     78                                 if (head.colType == "label") {
     79 
     80 
     81                                     rows.push('<td class="center">' + item_val + '</td>');
     82                                 } else if (head.colType == "checkbox") {
     83                                     rows.push('<td class="center">');
     84                                     rows.push('    <label class="pos-rel">');
     85                                     rows.push('         <input type="checkbox" name="cb" value="' + item_val + '" class="ace">');
     86                                     rows.push('         <span class="lbl"></span>');
     87                                     rows.push('    </label>');
     88                                     rows.push('</td>');
     89                                 } else if (head.colType == "operate") {
     90 
     91                                     rows.push('<td class="center"><div class="hidden-sm hidden-xs action-buttons">');
     92                                     if (defOption.editeOption.url.length > 0) {
     93                                         var editOption = $.extend({}, defOption.editeOption);
     94                                         editOption.url += "/" + item_val;
     95                                         editOption.title += modalHeadText.length > 0 ? "-" + modalHeadText : "";
     96 
     97                                         var op = JSON.stringify(editOption);
     98                                         rows.push('<a class="blue" data-item=\'' + op + '\' href="javascript:;"><i class="ace-icon fa fa-pencil bigger-130"></i></a>');
     99                                     }
    100                                     if (defOption.viewOption.url.length > 0) {
    101 
    102                                         var viewOption = $.extend({}, defOption.viewOption);
    103                                         viewOption.url += "/" + item_val;
    104                                         viewOption.title += modalHeadText.length > 0 ? "-" + modalHeadText : "";
    105 
    106                                         var op = JSON.stringify(viewOption);
    107                                         rows.push('<a class="blue" data-item=\'' + op + '\' href="javascript:;"><i class="ace-icon fa fa-search-plus bigger-130"></i></a>');
    108                                     }
    109                                     if (defOption.delOption.url.length > 0) {
    110 
    111                                         var delOption = $.extend({}, defOption.delOption);
    112                                         delOption.url += "/" + item_val;
    113                                         delOption.title += modalHeadText.length > 0 ? "-" + modalHeadText : "";
    114 
    115                                         var op = JSON.stringify(delOption);
    116                                         rows.push('<a class="blue" data-item=\'' + op + '\' href="javascript:;"><i class="ace-icon fa fa-trash-o bigger-130"></i></a>');
    117                                     }
    118                                     rows.push('</div></td><div>www.4pan.net</div>');
    119                                 }
    120                                 else {
    121 
    122                                     rows.push('<td class="center">' + item_val + '</td>');
    123                                 }
    124                             }
    125                             rows.push('</tr>');
    126                         });
    127 
    128                         //页数展示
    129                         if (data.MoResult.length > 0) {
    130                             var pager = [];
    131                             pager.push('<div class="text-center">');
    132                             pager.push('    <ul class="pagination" style="margin-top:0px">');
    133                             var nPager = defOption.showPageTab;//每次展示6个分页
    134                             //上一页
    135                             var nprev = (data.CurrentPage - 1 >= 1 ? data.CurrentPage - 1 : 1);
    136                             pager.push('        <li class="paginate_button previous" aria-controls="dynamic-table" tabindex="0" id="dynamic-table_previous">');
    137                             pager.push('           <a href="javascript:;" name="npager" data-page="' + nprev + '">上一页</a>');
    138                             pager.push('        </li>');
    139 
    140                             //当前页之前页码
    141                             var preTotal = data.CurrentPage - nPager >= 1 ? data.CurrentPage - nPager : 1;
    142                             for (var i = preTotal; i < data.CurrentPage ; i++) {
    143 
    144                                 pager.push('       <li class="paginate_button ' + (i == data.CurrentPage ? "active disabled" : "") + '" aria-controls="dynamic-table">');
    145                                 pager.push('          <a href="javascript:;" name="npager" data-page="' + i + '">' + i + '</a>');
    146                                 pager.push('       </li>');
    147                             }
    148 
    149                             //当前页
    150                             pager.push('       <li class="paginate_button active disabled" aria-controls="dynamic-table">');
    151                             pager.push('          <a href="javascript:;" name="npager" data-page="' + data.CurrentPage + '">' + data.CurrentPage + '</a>');
    152                             pager.push('       </li>');
    153 
    154                             //当前页以后页码
    155                             var nextTotal = data.CurrentPage + nPager > data.PageTotal ? data.PageTotal : data.CurrentPage + nPager;
    156                             for (var i = data.CurrentPage + 1; i <= nextTotal; i++) {
    157 
    158                                 pager.push('       <li class="paginate_button ' + (i == data.CurrentPage ? "active disabled" : "") + '" aria-controls="dynamic-table">');
    159                                 pager.push('          <a href="javascript:;" name="npager" data-page="' + i + '">' + i + '</a>');
    160                                 pager.push('       </li>');
    161                             }
    162                             //下一页
    163                             var nnext = (data.PageTotal < data.CurrentPage + 1 ? data.PageTotal : data.CurrentPage + 1);
    164                             pager.push('          <li class="paginate_button next" aria-controls="dynamic-table" tabindex="0" id="dynamic-table_next">');
    165                             pager.push('              <a href="javascript:;" name="npager" data-page="' + nnext + '">下一页</a>');
    166                             pager.push('          </li>');
    167 
    168                             pager.push('    </ul>');
    169                             //分页查询条件
    170                             pager.push('<div style="display:none">');
    171                             pager.push('    <form>');
    172                             pager.push('        <input type="hidden" name="pageSize" value="' + defOption.pageSize + '"/>');
    173                             pager.push('        <input type="hidden" name="currentPage" value="' + defOption.currentPage + '"/>');
    174                             pager.push('    </form>');
    175                             pager.push('</div>');
    176 
    177                             pager.push('</div>');
    178 
    179                             //移除加载中
    180                             //head.html("");
    181                             //添加结果
    182                             head.html(rows.join(''));
    183                             $("div[id='divPager']").html(pager.join(''));
    184                             //操作按钮事件
    185                             $("a[data-item]").on("click", function () {
    186 
    187                                 var data_Item = $(this).attr("data-item");
    188                                 if (data_Item) {
    189                                     var data_Item_Obj = JSON.parse(data_Item);
    190 
    191                                     defOption.modalExt.modalFun({
    192                                         width: data_Item_Obj.width,
    193                                         height: data_Item_Obj.height,
    194                                         url: data_Item_Obj.url,
    195                                         title: data_Item_Obj.title,
    196                                         callback: defOption.callback
    197                                     });
    198                                 }
    199                             });
    200                             //绑定分页按钮事件
    201                             $("a[name='npager']").on("click", function () {
    202 
    203                                 var nPager = $(this).attr("data-page");
    204                                 if (nPager.length <= 0) { return; }
    205 
    206                                 $("form input[name='currentPage']").val(nPager);
    207 
    208                                 //执行请求后台
    209                                 ajaxFun(defOption);
    210                             });
    211                         } else {
    212                             head.html("<tr><td class=\"text-center\" colspan=\"" + defOption.headText.length + "\">未能查询到数据！</td></tr>");
    213                             $("div[id='divPager']").html("");
    214                         }
    215                     } else {
    216                         head.html("<tr><td class=\"text-center\" colspan=\"" + defOption.headText.length + "\">未能查询到数据。</td></tr>");
    217                         $("div[id='divPager']").html("");
    218                     }
    219                 } else {
    220                     head.html("<tr><td class=\"text-center\" colspan=\"" + defOption.headText.length + "\">未能查询到数据</td></tr>");
    221                     $("div[id='divPager']").html("");
    222                 }
    223             };
    224             if (option) {
    225                 $.extend(defOption, option);
    226             }
    227 
    228             //执行请求后台
    229             ajaxFun(defOption);
    230         }

这个方法体挺长的，主要操作是：

**默认格式展示列表头部并呈现出加载中的提示=》绑定复选框全选事件=》创建数据返回成功函数sucFun()=》调用请求后台方法ajaxFun()；**

再来看**函数sucFun()**等到数据返回后执行的操作是：

**遍历json返回数据展示到table中(其中包括了时间格式化的处理，复选框，label及操作按钮类型operate的初始化)=》页数展示及事件绑定(目前只有上一页，当前页之前页码，当前页，当前页以后页码，下一页的效果展示，分页查询条件(生成pagesize和currentPage隐藏控件)，绑定分页按钮事件)**

[348819-20161206121510366-1175685579.png]: /images/20220714/4f2e77500ea94461bf9a7e45711f40f2.png
[348819-20161206121534241-1518179067.png]: /images/20220714/4c05036c9f124752ae9e825f7132a00b.png
[348819-20161206121550147-2005604639.png]: /images/20220714/6faf465d6d38458d829fbb627261f181.png
[348819-20161206122732913-2133653438.png]: /images/20220714/a7200654f96a4870bf76ca2b478eccd3.png
[copycode.gif]: /images/20220714/d35b2209dba44e1089367a35d9dfffc2.png
[348819-20161206130627866-1558743696.png]: /images/20220714/608701fcc27f4f22a025f9ca83a4f1fc.png
[ContractedBlock.gif]: http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif
[ExpandedBlockStart.gif]: /images/20220714/5b595fa0a7264ca0a4cb62a5efe094b8.png