通过学习Vue,的确觉的Vue的双向绑定使用起来十分方便,因此研究了一下列表显示时分页的实现,这里我使用了bootstrap的样式,所以在页面中引用bootstrap的样式文件,后台提数据源使用.net的,数据库访问使用EF,如果库中存有大量数据,为提高显示速度还是建议使用更好的数据访问方式,比如dapper,下面看看我的实现 :
1、首先创建一个分页的类PageList,封装其分页所需的各值:
public class PageList { ////// 初始化 /// /// 当前页 /// 记录数 /// 每页显示的记录数 /// 页码显示数量 public PageList(int curPage, int total,int pagesize=10,int showPageNum=9) { this.total = total; this.pagesize = pagesize; this.curPage = curPage; this.showPageNum = showPageNum; this.firstNum = 1; this.lastNum = this.totalPages; this.pagelist = this.getPagelist(); } //前面的点,前面省略的页数用.来代表, public bool previousSpot { get; set; } //后面的点,后面省略的页数用.来代表, public bool nextSpot { get; set; } //第一个页数,一般都是1 public int firstNum { get; set; } //最后一个页数,也就是最大页数 public int lastNum { get; set; } //默认页面显示最多页号数目 public int showPageNum { get; set; } public int total { get; set; }//总记录数 //总页数 public int totalPages { get { return (int)Math.Ceiling((double)total / pagesize); } } public int curPage { get; set; }//当前页 public int pagesize { get; set; }//每页大小 //页数列表,此列表中不包含第一页和最后一页 public List<int> pagelist { get; set; } public List<int> getPagelist() { var p = new List<int>(); if (totalPages <= showPageNum)//全部显示 { for (int i = 2; i < totalPages; i++) { p.Add(i); } } else { var yiban = ((int)((showPageNum + 1) / 2)) - 1;//前后保留页数大小 if (curPage - yiban > 1 && curPage + yiban < totalPages) { //两头都可取值 this.previousSpot = this.nextSpot = true; for (int i = curPage - yiban+1; i < curPage + yiban; i++) { p.Add(i); } } else if (curPage - yiban > 1 ) { //右头值少 this.previousSpot = true; for (int i = totalPages - 1; i > totalPages - showPageNum + 2; i--) { p.Add(i); } } else if (curPage - yiban <= 1 ) { //左头值少 this.nextSpot = true; for (int i = 2; i < showPageNum; i++) { p.Add(i); } } } return p.OrderBy(x => x).ToList(); }
这里默认设定了显示页码时最多显示的页码数量为9,也就是页码数量超过9时,用...隐藏其超过的数,当前页始终显示在最中央。
2、后台提取数据的控制器:
int pagesize = 10;//设定每页显示的记录数量 //取 public ActionResult GetData(int curPage = 1) { var total = db.news.Count();//取记录数 var pages = new PageList(curPage, total, pagesize);//初始化分页类 var list = db.news.OrderBy(x => x.id).Skip((curPage - 1) * pagesize).Take(pagesize);//取页面记录列表 var data = new { list = list, pages = pages };//构造对象 return Json(data, JsonRequestBehavior.AllowGet); }
页面中的数据是通过异步方式提取,第一次是默认是第一页,这里的页面记录列表的提取使用了EF,当然还可以使用其它方式访问数据库,这里只是为了方便演示,建议在真正项目使用更加高效的方法。
这里提供dapper访问的方法,其中加入了查询语句。
public ActionResult getdata(news info, int page = 1) { var conn = db.Database.Connection; var sql = string.Format("select * ,row_number() over ( order by id desc ) as rownum from news where 1=1 "); if (!string.IsNullOrEmpty(info.title)) { sql = string.Format(sql + " and title like '%{0}%'", info.title); } if (!string.IsNullOrEmpty(info.writer)) { sql = string.Format(sql + " and writer like '%{0}%'", info.writer); } if (!string.IsNullOrEmpty(info.depname)) { sql = string.Format(sql + " and depname ='{0}'", info.depname); } var sql2 = string.Format("select top {0} * from (" + sql + ") as a where a.rownum>({1}-1)*{0} and a.rownum<={0}*{1}", pagesize, page); var sqlcount = string.Format("select count(rownum) from (" + sql + ")"); using (conn) { var list = conn.Query(sql2); var total = conn.QuerySingle<int>("select count(id) from (" + sql + ") as aa"); var pages = new PageList(page, pagesize, total); var obj = new { list = list, pages = pages }; return Json(obj, JsonRequestBehavior.AllowGet); } }
3、页面中的分页实现如下:
@{ ViewBag.Title = "Index"; } "~/Content/css/bootstrap-theme.min.css" rel="stylesheet" /> "~/Content/css/bootstrap.min.css" rel="stylesheet" /> "~/Content/css/font-awesome.min.css" rel="stylesheet" />
"app">
- for="item in list">{{item.title}}
分页部分已经通过改造,使用了Vue的方式,使用时直接复制即可使用,使用的方法就有两个go,getData,每次在使用时可以在方法中加入这两个方法, ajax使用axios.js实现 。
简单写成组件,以后再完善
@{ ViewBag.Title = "Index"; } "~/Content/css/bootstrap-theme.min.css" rel="stylesheet" /> "~/Content/css/bootstrap.min.css" rel="stylesheet" /> "~/Content/css/font-awesome.min.css" rel="stylesheet" />
"app">"myPage">
- for="item in list">{{item.title}}
"pages" v-on:getdata="getData">
进一步改进组件,通用性更好,下面把访问地址等提取到组件中
@{ ViewBag.Title = "Index"; } "~/Content/css/bootstrap-theme.min.css" rel="stylesheet" /> "~/Content/css/bootstrap.min.css" rel="stylesheet" /> "~/Content/css/font-awesome.min.css" rel="stylesheet" />
"app">"myPage">
- for="item in list">{{item.title}}
"getdata" url="/home/getdata">
为了以后能重用,可以把组件放在一个页面中,其它地方法引用组件。在.netMVC4下封装此分页实现如下 :
分页实现
1、自定义一个分页类:WzhPaged,封装分页各参数
public class WzhPaged { ////// 初始化 /// /// 当前页 /// 记录数 /// 每页显示的记录数 /// 页码显示数量 public WzhPaged(int curPage, int total, int pagesize = 10, int showPageNum = 9) { this.total = total; this.pagesize = pagesize; this.curPage = curPage; this.showPageNum = showPageNum; this.firstNum = 1; this.lastNum = this.totalPages; this.pagelist = this.getPagelist(); } //前面的点,前面省略的页数用.来代表, public bool previousSpot { get; set; } //后面的点,后面省略的页数用.来代表, public bool nextSpot { get; set; } //第一个页数,一般都是1 public int firstNum { get; set; } //最后一个页数,也就是最大页数 public int lastNum { get; set; } //默认页面显示最多页号数目 public int showPageNum { get; set; } public int total { get; set; }//总记录数 //总页数 public int totalPages { get { return (int)Math.Ceiling((double)total / pagesize); } } public int curPage { get; set; }//当前页 public int pagesize { get; set; }//每页大小 //页数列表,此列表中不包含第一页和最后一页 public List<int> pagelist { get; set; } public List<int> getPagelist() { var p = new List<int>(); if (totalPages <= showPageNum)//全部显示 { for (int i = 2; i < totalPages; i++) { p.Add(i); } } else { var yiban = ((int)((showPageNum + 1) / 2)) - 1;//前后保留页数大小 if (curPage - yiban > 1 && curPage + yiban < totalPages) { //两头都可取值 this.previousSpot = this.nextSpot = true; for (int i = curPage - yiban + 1; i < curPage + yiban; i++) { p.Add(i); } } else if (curPage - yiban > 1) { //右头值少 this.previousSpot = true; for (int i = totalPages - 1; i > totalPages - showPageNum + 2; i--) { p.Add(i); } } else if (curPage - yiban <= 1) { //左头值少 this.nextSpot = true; for (int i = 2; i < showPageNum; i++) { p.Add(i); } } } return p.OrderBy(x => x).ToList(); } }
2、使用Vue封装好分页代码单独放在一个页面中,比如在Views/Shared下添加页面 _pagehelper.cshtml:
"mypage">
3、在每个模板页中引用上面的组件文件,比如模板页_Layout.cshtml中引用此页:
"utf-8" /> "viewport" content="width=device-width" />@ViewBag.Title "~/Content/css/bootstrap-theme.min.css" rel="stylesheet" /> "~/Content/css/bootstrap.min.css" rel="stylesheet" /> "~/Content/css/font-awesome.min.css" rel="stylesheet" /> @{Html.RenderPartial("_pagehelper");} @RenderBody() @RenderSection("scripts", required: false)
只要使用了此模板的网页就有了分页的组件,就可以方便快捷的使用分页组件了。
4、下面在需要分页功能的页面上使用组装好的组件,考虑到页面中可能会使用到查询功能,所以分两种情况,无查询搜索功能和有查询搜索功能。
(1).无查询搜索功能,比较简单一点:
"app">
- for="item in list">{{item.title}}
if="list.length==0"> 无数据
, getdata是设置要显示的列表集合赋值, url是页面在页码间跳转时获取数据来源的地址。
(2)有查询搜索功能,这个较复杂一些,根据自身需求自己来写查询条件,这里列出本人在项目使用的方法
"app">class="search"> "标题" style="width:200px;display:inline-block" class="form-control" v-model.trim="title" /> "撰稿人" style="width:200px;display:inline-block" class="form-control" v-model.trim="writer" /> 发部单位:<select v-model="depname" class="form-control" style="width:auto;display:inline"> select>class="table table-responsive"> for="item in list">
"50%">标题 时间 一级栏目 二级栏目 发表者 单位 "'/home/news/'+item.id" target="_blank"> {{item.title}} {{item.addtime|formatedate}} {{item.colfirstName}} {{item.colsecondName}} {{item.writer}} {{item.depname}} if="list.length==0"> 无数据
,多了两个属性, prop是查询和跳转时用到的参数,比如查询姓名等,但这里跳转的页码是不用管,因为我已经在组件中完成它了。
prop要在计算属性中设置好要传送的值。
6、.net后台,控制器
不需要查询的:
public ActionResult getData(int curPage = 1) { var total = db.news.Count();//取记录数 var pages = new PageList(curPage, total, pagesize);//初始化分页类 var list = db.news.OrderBy(x => x.id).Skip((curPage - 1) * pagesize).Take(pagesize);//取页面记录列表 var obj = new { list = list, pages = pages };//构造对象 return Json(obj, JsonRequestBehavior.AllowGet); }
需要查询的:
public ActionResult getlistdata(news info, int curPage = 1, string type = "") { var conn = db.Database.Connection; var sql = string.Format("select * ,row_number() over ( order by id desc ) as rownum from news where ispublish=1 and colsecondName='{0}' ", type); if (!string.IsNullOrEmpty(info.title)) { sql = string.Format(sql + " and title like '%{0}%'", info.title); } if (!string.IsNullOrEmpty(info.writer)) { sql = string.Format(sql + " and writer like '%{0}%'", info.writer); } if (!string.IsNullOrEmpty(info.depname)) { sql = string.Format(sql + " and depname ='{0}'", info.depname); } var sql2 = string.Format("select top {0} * from (" + sql + ") as a where a.rownum>({1}-1)*{0} and a.rownum<={0}*{1}", pagesize, curPage); var sqlcount = string.Format("select count(rownum) from (" + sql + ")"); using (conn) { var newslist = conn.Query(sql2); var total = conn.QuerySingle<int>("select count(id) from (" + sql + ") as aa"); var pagelist = new WzhPaged(curPage, total, pagesize); var obj = new { list = newslist, pages = pagelist }; return Json(obj, JsonRequestBehavior.AllowGet); } }