如今较繁忙,先前时期忙集团手机端接口项目,各个开销+调试+发表现在几达到线无问题了;即使店项目忙不了当里边忙里偷闲做了简单起个人认为出意义之政工,一者使用aspnetcore开发了私家线上种(要说线及实际只好ip访问,没有域名哈哈),其架构重组由:aspnetcore1.0.0+redis+
postgressql+TaskMainForm服务
,那个路在深会开源出来供我们分享学习,站点地址点这里心声网;一者是当前正在开的后台管理框架一叶子,现眼前刚好吧js分页插件shenniu.pager.js写了,个人觉得要好的,这也是本章将要和我们大快朵颐的情节;那么开后日之享用内容,希望各位多多扫码匡助:

 

  . 为啥使用js分页及效益图

  . 以view中争使用及享受个后台方法

  . 开发者视角看shenniu.pager.js代码

 

下一步一个脚印的来分享:

. 为啥以js分页及效果图

率先,咋们来打探下市场上mvc两栽常用的分页形式:跳转分页和ajax分页;跳转分页意思就是是页面重定向至指定的页面并透过传递分页需要的参数,从而获取数据后经过Modal来绑定数据,这多少个每便都会师刷下页面体验上无是可怜好;ajax分页透过异步js请求某个接口,然后于接口获取到多少后,再赋值到显示的界面上,这种办法是匪会面刷新页面,从而确保了用户体验;

脚来拘禁下这一次分享的js分页插件效果图:

图一:

json 1

图二:

json 2

图三:

json 3

看功效图接近看不出来什么事物,我只得说没道,未来争取为个gif动态图表吧,前边代码才是至关首要

 

. 于view中咋样下和享受个后台方法

率先,为了页面样式赏心悦目我以了bootstrap+ace样式框架,样式效果就是设上面几乎摆设图所示(这里是样式与js文件);由于该插件是使jquery格式书写的用用引用jquery.js,如上边图所示使用及了日期采纳框,因为自己以的体裁都是按照h5的设计所以这边引用的日期选取插件bootstrap-datepicker.min.js和其底体制bootstrap-datepicker3.min.css;该实例需要之援文件还吓了,下边看下截图:

json 4

再来,咋们就从头选用shenniu.pager.js,我们要在点击“查询”按钮的时候失去调用这一个插件,然后通过插件去取得后台接口重临的数量,并绑定到页面突显下,所以暴发矣之类代码:

 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         });

只顾参数url:
“/Menu/Search”,这些对的就是后台接口,那么咋们来拘禁下自家后台咋们写的:

 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         }

后台接口Request.Params获取之六只参数就是起前端

       var data = {
                txtName: $("input[name='txtName']").val(),
                nStatus: $("select option:selected").val(),
                dOperateTime: $("input[name='dOperateTime']").val()
            };

  传递过来的,分别代码了视图中之名目,状态,操作时等于查询条件;下面来拘禁下,后台这儿没有见到获取类分页的脚下页数和分页记录数的操作,是包装到了MoPageResult类中的MoPageContent()中,来拘禁下MoPageResult类代码如:

 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

MoPageContent()中默认是取了pagesize,currentpage参数,那样缩小了用户操作性,并且这些办法承担了匡总页数和施行分页语句的角色,注意最后查询语句Select(selector),selector是Expression<Func<T,
TResult>>
路,这多少个T有标准化约束where T :
class,new()
;我在调用该分页类的下传递的T是dynamic,因为赖人如我以为匿名类更便于;唯一遗憾的凡select输出暂时不可能直接指向有属性直接动用形式;

末尾,插件使用还需要注意一个地点,就是时间,假使后台不处理时一向Date提姆(Tim)e的json格式化,那么当插件获取出来的光阴格式如:

json 5

是时节就是用在行使shenniu.pager.js插件时候在性headText吃,指定时间列的格式如:

 { nickName: "操作时间", name: "OperateTime", format: "yyyy-MM-dd" }

  使用format格式化时间格式,那个插件兼容的为来:yyyy,MM,dd,HH,mm,ss,相信满足大家需要了;

 

. 开发者视角看shenniu.pager.js代码

首先,大家从上而下,映入眼帘的是插件属性json,:

json 6json 7

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);

View Code

里头就席卷了诠释表明,看起应当不是问题; $.extend(defOption,
option); 这段代码意思是吧用户传递进入的参数与插件里面默认的参数合并,用户超越插件直接可以挂相同属性之值;

再来,看恳请后台的方法:

 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     }

是主意就是是请求接口获取数据的法门,里面默认获取了页面被的pageSize,currentPage两独分页所要之参数,这里用的凡get模式来要,当然可以形容成post,可是需要后台襄助post就实施了;

咱重新拘留查询列表方法

json 8json 9

  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('        ' + head.nickName + '');
 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('         ');
 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>');
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         }

View Code

夫方法体挺充分的,重要操作是:

默认格式显示列表头部连展现出加载中的提醒=》绑定复选框全选事件=》创设数量再次来到成功函数sucFun()=》调用请求后台方法ajaxFun();

再来看函数sucFun()当及数码重临后行之操作是:

万事历json再次回到数据突显及table中(其中包了时间格式化的拍卖,复选框,label及操作按钮类型operate的起先化)=》页数展现同波绑定(如今唯有达到一致页,当前页从前页码,当前页,当前页后页码,下一样页的功力亮,分页查询条件(生成pagesize和currentPage隐藏控件),绑定分页按钮事件)

以上就是shenniu.pager.js全副插件内容,不多还清晰,感觉分享给我们好如沐春风,下边贴出示例被之所以到的js文件与css文件可以于此间下载

 

相关文章

网站地图xml地图