.NetCore 实现分页控件(URL分页)实战
上一篇文章介绍了分页控件的具体实现方式,接下来我们就来做一个分页控件
后台数据处理就过度的介绍,下面针对URL分页中的下面几点做说明:
1、搜索条件的状态保持
2、点击分页需要带上搜索条件
3、页码的逻辑显示
下面就来实现分页控件
首先按照上一篇文章中 我们建立了一个UosoPagerOption 分页参数类,这里我没有准备太多的参数
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
public class UosoPagerOption { public int PageIndex { get; set; } public int PageSize { get; set; } public int CountNum { get; set; } public int ItemCount { get; set; } public int TotalPage { get { return ItemCount % PageSize > 0 ? (ItemCount / PageSize + 1) : ItemCount / PageSize; } } public string Url { get; set; } public IQueryCollection Query { get; set; } }
Query:主要还是用来接收url参数
CountNum:显示的页面个数
PageIndex:当前页
PageSize:每页数据条数
ItemCount:总数据条数
TotalPage:总页数
Url:分页请求的地址
然后我们就是扩展控件了(TagHelper),整理类UosoPagerTagHelper
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
public class UosoPagerTagHelper : TagHelper { public UosoPagerOption UosoPagerOption { get; set; } public override void Process(TagHelperContext context, TagHelperOutput output) { output.TagName = "div"; if (UosoPagerOption.CountNum < 1) { UosoPagerOption.CountNum = 5; } if (UosoPagerOption.PageIndex < 1) { UosoPagerOption.PageIndex = 1; } if (UosoPagerOption.PageIndex > UosoPagerOption.TotalPage) { UosoPagerOption.PageIndex = UosoPagerOption.TotalPage; } if (UosoPagerOption.TotalPage <= 1) { return; } var queryarr = UosoPagerOption.Query.Where(c => c.Key != "pageindex" && c.Key != "pagesize").ToList(); string queryurl = string.Empty; foreach (var item in queryarr) { queryurl += "&" + item.Key + "=" + item.Value; } output.Content.AppendFormat("<a class=\"prev\" href=\"{0}?pageindex={1}&pagesize={2}{3}\">首页</a>", UosoPagerOption.Url, 1, UosoPagerOption.PageSize, queryurl); output.Content.AppendFormat("<a class=\"prev\" href=\"{0}?pageindex={1}&pagesize={2}{3}\">上一页</a>", UosoPagerOption.Url, UosoPagerOption.PageIndex - 1, UosoPagerOption.PageSize, queryurl); #region 分页逻辑 if (UosoPagerOption.PageIndex == 1) { for (int i = UosoPagerOption.PageIndex; i <= UosoPagerOption.PageIndex + UosoPagerOption.CountNum - 1; i++) { if (i <= UosoPagerOption.TotalPage) { if (UosoPagerOption.PageIndex == i) { output.Content.AppendFormat("<span class=\"current\">{0}</span>", i); } else { output.Content.AppendFormat("<a class=\"num\" href=\"{0}?pageindex={1}&pagesize={2}{3}\">{1}</a>", UosoPagerOption.Url, i, UosoPagerOption.PageSize, queryurl); } } } } else if (UosoPagerOption.PageIndex % UosoPagerOption.CountNum == 0) { for (int i = UosoPagerOption.PageIndex - (UosoPagerOption.CountNum / 2); i <= UosoPagerOption.PageIndex + UosoPagerOption.CountNum / 2; i++) { if (i <= UosoPagerOption.TotalPage) { if (UosoPagerOption.PageIndex == i) { output.Content.AppendFormat("<span class=\"current\">{0}</span>", i); } else { output.Content.AppendFormat("<a class=\"num\" href=\"{0}?pageindex={1}&pagesize={2}{3}\">{1}</a>", UosoPagerOption.Url, i, UosoPagerOption.PageSize, queryurl); } } } } else { int startindex = UosoPagerOption.CountNum * (UosoPagerOption.PageIndex / UosoPagerOption.CountNum) + 1; for (int i = startindex; i <= startindex + UosoPagerOption.CountNum - 1; i++) { if (i <= UosoPagerOption.TotalPage) { if (UosoPagerOption.PageIndex == i) { output.Content.AppendFormat("<span class=\"current\">{0}</span>", i); } else { output.Content.AppendFormat("<a class=\"num\" href=\"{0}?pageindex={1}&pagesize={2}{3}\">{1}</a>", UosoPagerOption.Url, i, UosoPagerOption.PageSize, queryurl); } } } } #endregion //for (int i = 1; i <= UosoPagerOption.TotalPage; i++) //{ // if (UosoPagerOption.PageIndex == i) // { // output.Content.AppendFormat("<span class=\"current\">{0}</span>", i); // } // else // { // output.Content.AppendFormat("<a class=\"num\" href=\"{0}?pageindex={1}&pagesize={2}{3}\">{1}</a>", UosoPagerOption.Url, i, UosoPagerOption.PageSize, queryurl); // } //} output.Content.AppendFormat("<a class=\"next\" href=\"{0}?pageindex={1}&pagesize={2}{3}\">下一页</a>", UosoPagerOption.Url, UosoPagerOption.PageIndex + 1, UosoPagerOption.PageSize, queryurl); output.Content.AppendFormat("<a class=\"next\" href=\"{0}?pageindex={1}&pagesize={2}{3}\">尾页</a>", UosoPagerOption.Url, UosoPagerOption.TotalPage, UosoPagerOption.PageSize, queryurl); base.Process(context, output); } }
这里包含了页码的逻辑显示以及参数组装,写好了主要需要导入你的控件引用哦
下面在页面中使用控件
这里没有真实的数据,我在Controller中模拟了分页参数信息
ViewBag.Option = new UosoPagerOption() { ItemCount = 100, PageSize = pagesize, //5 PageIndex = pageindex, CountNum = 5, Url = Request.Path.Value, Query = Request.Query };
接下来请求页面看下具体效果
鼠标放在监控下页码的地址链接,可以看到每页5条,第2页的参数
当我们使用查询后搜索下,同时监控页码参数可以看到保留对应的搜索条件
接下里就是搜索条件状态的保持了,解决方案可以写一个js插件处理url参数并赋值到对应的控件(根据key值找到对应的name的控件)
根据这个我们可以继续扩展哦 如分页信息的显示以及 自定义的 GO PageIndex 转到某一页 或者自定义每页显示的PageSize
如果您觉得阅读本文对您有帮助,请点一下“推荐”按钮,您的“推荐”将是我最大的写作动力!
本文版权归作者和博客园共有,来源网址:http://www.cnblogs.com/liyouming欢迎各位转载,但是未经作者本人同意,转载文章之后必须在文章页面明显位置给出作者和原文连接。