最近比较忙，前期忙公司手机端接口项目，各种开发+调试+发布现在几乎上线无问题了；虽然公司项目忙不过在期间抽空做了两件个人觉得有意义的事情，一者使用aspnetcore开发了个人线上项目（要说线上其实只能ip访问，没有域名哈哈），其架构组成由：aspnetcore1.0.0+redis+ postgressql+TaskMainForm服务，这个项目在后期会开源出来供大家分享学习，站点地址点这里心声网；一者是目前正在做的后台管理框架一叶子，现目前刚好吧js分页插件shenniu.pager.js写完，个人觉得还是可以的，这也是本章将要和大家分享的内容；那么开始今天的分享内容，希望各位多多扫码支持：
为什么采用js分页及效果图
开发者视角阅读shenniu.pager.js代码
下面一步一个脚印的来分享：
. 为什么采用js分页及效果图
首先，咋们来了解下市面上mvc两种常用的分页方式：跳转分页和ajax分页；跳转分页意思就是页面重定向到指定的页面并通过传递分页需要的参数，从而获取数据后通过Modal来绑定数据，这个每次都会刷下页面体验上不是很好；ajax分页通过异步js请求某个接口，然后从接口获取到数据后，再赋值到展示的界面上，这种方式是不会刷新页面，从而保证了用户体验；
下面来看下这次分享的js分页插件效果图：
图一：
图二：
图三：
看效果图好像看不出来什么东西，我只能说没办法，以后争取弄个gif动态图片吧，后面代码才是关键
. 在view中如何使用及分享个后台方法
首先，为了页面样式好看我使用了bootstrap+ace样式框架，样式效果就是如上面几张图所示(这里是样式和js文件)；由于该插件是采用jquery格式书写的所以需要引用jquery.js，如上面图所示使用到了日期选择框，因为我采用的样式都是基于h5的设计所以这里引用的日期选择插件bootstrap-datepicker.min.js和她的样式bootstrap-datepicker3.min.css；该实例需要的引用文件都好了，下面看下截图：
再来，咋们就开始使用shenniu.pager.js,我们需要在点击“查询”按钮的时候去调用这个插件，然后通过插件去获取后台接口返回的数据，并绑定到页面展示出来，所以有了如下代码：
var snTool = new shenniuTool(); $("button[id='btnSearch']").on("click", function () { var data = { txtName: $("input[name='txtName']").val(), nStatus: $("select option:selected").val(), dOperateTime: $("input[name='dOperateTime']").val() }; snTool.listFun({ showId: "divShowResult", //内容显示的div的Id url: "/Menu/Search", data: data, pageSize: 2, //每页N条 headText: [ { nickName: "全选", name: "Id", colType: "checkbox" }, { nickName: "名称", name: "Name", colType: "label", isModalHeadText: true }, { nickName: "链接", name: "Link" }, { nickName: "状态", name: "EnableDes" }, { nickName: "操作人", name: "OperatorDes" }, { nickName: "操作时间", name: "OperateTime", format: "yyyy-MM-dd" }, { nickName: "操作", name: "Id", colType: "operate" } ], editeOption: { url: "/Menu/Edit", title: "编辑", height: 500 }, viewOption: { url: "/Menu/Details", title: "查看", height: 500 }, delOption: { url: "/Menu/Delete", title: "删除", height: 500 }, modalExt: modalExt }); });
注意参数url: "/Menu/Search"，这个指向的就是后台接口，那么咋们来看下我后台咋们写的:
[HttpGet] public JsonResult Search() { var moPageResult = new StageModel.MoPageResult<dynamic>(); try { var txtName = Request.Params["txtName"]; var nStatus = string.IsNullOrWhiteSpace(Request.Params["nStatus"]) ? -1 : Convert.ToInt32(Request.Params["nStatus"]); var dOperateTime = string.IsNullOrWhiteSpace(Request.Params["dOperateTime"]) ? Convert.ToDateTime("1991-01-01") : Convert.ToDateTime(Request.Params["dOperateTime"]); var data = db.MoMenus.AsQueryable(); if (!string.IsNullOrWhiteSpace(txtName)) { data = data.Where(b => b.Name.Contains(txtName)); } if (nStatus >= 0) { data = data.Where(b => b.IsEnable == (nStatus == (int)StageEnumHelper.ComStatus.启用)); } if (dOperateTime > Convert.ToDateTime("1991-01-01")) { data = data.Where(b => b.OperateTime >= dOperateTime && b.OperateTime < dOperateTime.AddDays(1)); } moPageResult.MoPageContent( data, b => b.OperateTime, b => new { Id = b.Id, Name = b.Name, Link = b.Link, Des = b.Des, IsEnable = b.IsEnable, Operator = b.Operator, OperatorDes = b.MoUserInfo.NickName, EnableDes = b.IsEnable ? "启用" : "禁用", OperateTime = b.OperateTime }); } catch (Exception ex) { } return Json(moPageResult, JsonRequestBehavior.AllowGet); }
后台接口Request.Params获取的几个参数就是从前端
var data = { txtName: $("input[name='txtName']").val(), nStatus: $("select option:selected").val(), dOperateTime: $("input[name='dOperateTime']").val() };