该分页控件的显示逻辑:
1 当前页面反色突出显示,链接不可点击
2 第一页时首页链接不可点击
3 最后一页时尾页链接不可点击
4 当前页面左右各显示页码可以设置调节,如果左右一样则居中
5 当左边页码不足时,右侧补充
6 当右侧页面不足时左侧补充
7 总显示页码数为左侧+右侧+1(当前)
组成部分:
1 PageModel 便于向组件传递参数
public class PageModel ???{ ???????/// <summary> ???????/// 数据总条数 ???????/// </summary> ???????public int DataCount { get; set; } ???????/// <summary> ???????/// 当前页码 ???????/// </summary> ???????public int Page { get; set; } ???????/// <summary> ???????/// 每页条数 ???????/// </summary> ???????public int PageSize { get; set; } ???????/// <summary> ???????/// 当前页码左边显示页数 ???????/// </summary> ???????public int NumsOfLeft { get; set; } ???????/// <summary> ???????/// 当前页码右边显示页数 ???????/// </summary> ???????public int NumsOfRight { get; set; } ???????/// <summary> ???????/// 每页允许显示的最大条数 ???????/// 如果PageSize大于MaxPage则以MaxPage为准 ???????/// </summary> ???????public int MaxPage { get; set; } ???????/// <summary> ???????/// 页面前面的URL ???????/// 比如URL为http://www.chengchenxu.com/1 ????????/// 1为页码,则该属性应该设置为: ???????/// http://www.chengchenxu/ ???????/// </summary> ???????public string Url { get; set; } ????????public PageModel() ???????{ ???????????//设置的默认值 ???????????this.PageSize = 10; ???????????this.NumsOfLeft = 4; ???????????this.NumsOfRight = 4; ???????????this.MaxPage = 30; ???????}
2 分部视图: 这是一个强类型View,最上面的要对应到你的项目的命名空间中.
@model ChengChenXu.com.PageModel.Models.PageModel <ul class="pagination"> ???@{ ???????//页码逻辑运算 ???????double d = (double)Model.DataCount / Model.PageSize; ???????int pageNum = (int)Math.Ceiling(d); ???????Model.Page = Model.Page < 1 ? 1 : Model.Page; ???????Model.Page = Model.Page > pageNum ? pageNum : Model.Page; ???????Model.PageSize = Model.PageSize > Model.MaxPage ? Model.MaxPage : Model.PageSize; ???????int startNum, endNum; ???????if (Model.Page > Model.NumsOfLeft) ???????{ ???????????endNum = Model.Page + Model.NumsOfRight; ???????} ???????else ???????{ ???????????endNum = Model.Page + Model.NumsOfRight + (Model.NumsOfLeft - Model.Page + 1); ???????} ???????if (pageNum - Model.Page >= Model.NumsOfRight) ???????{ ???????????startNum = Model.Page - Model.NumsOfLeft; ???????} ???????else ???????{ ???????????startNum = Model.Page - Model.NumsOfLeft - (Model.NumsOfRight - (pageNum - Model.Page)); ???????} ???????startNum = startNum < 1 ? 1 : startNum; ???????endNum = endNum > pageNum ? pageNum : endNum; ???????//END 页码逻辑运算 ????????//开始显示页码 ????????????????//显示首页 ???????if (pageNum == 1 || Model.Page == 1) ???????{ ???????????<li class="disabled"><a href="#" onclick="return false;">«</a></li> ???????} ???????else ???????{ ???????????<li><a href="@Model.Url">«</a></li> ???????} ???????//END 显示首页 ????????//显示页码 ???????for (int i = startNum; i <= endNum; i++) ???????{ ???????????if (i == Model.Page) ???????????{ ???????????????<li class="active"><a href="#" onclick="return false;">@i</a></li> ???????????} ???????????else ???????????{ ???????????????<li><a href="@Model.Url@i">@i</a></li> ???????????} ????????} ???????//END 显示页码 ????????//显示尾页 ???????if (pageNum == 1 || Model.Page == pageNum) ???????{ ???????????<li class="disabled"><a href="#" onclick="return false;">»</a></li> ???????} ???????else ???????{ ???????????<li><a href="@Model.Url@pageNum">»</a></li> ???????} ???????//END 显示尾页 ???}</ul>
使用方法:
1 在需要使用的地方添加以下代码:
第一个参数为分部View的文件名,(要放到Shared文件夹中)
第二个参数为页面使用ViewBag传进来的PageModel对象 注意命名空间和ViewBag的动态标签
@Html.Partial("PagePartial", ViewBag.PageModel as ChengChenXu.com.PageModel.Models.PageModel)
2 在Controller中创建PageModel对象并使用ViewBag传递
public ActionResult Index(int id=1,int pagesize=10) ???????{ ???????????//模拟200条数据 ???????????List<string> list = new List<string>(); ???????????for (int i = 1; i <= 200; i++) ???????????{ ???????????????list.Add("第"+i+"条数据"); ???????????} ????????????ViewBag.List = list; ?????????????//创建PageModel对象 ???????????Models.PageModel pm = new Models.PageModel(); ???????????pm.DataCount = list.Count;//数据总条数 ???????????pm.Page = id;//当前页码 ???????????pm.PageSize = pagesize;//每页数量 ???????????pm.Url = "/home/index/"; //URL ????????????ViewBag.PageModel = pm; //传递PageModel ?????????????return View(); ???????}
生成代码
样式表请自己设计 DEMO中直接使用Bootstrap框架分页样式.
<ul class="pagination"> ???????????<li class="disabled"><a href="#" onclick="return false;">«</a></li> ???????????????<li class="active"><a href="#" onclick="return false;">1</a></li> ???????????????<li><a href="/home/index/2">2</a></li> ???????????????<li><a href="/home/index/3">3</a></li> ???????????????<li><a href="/home/index/4">4</a></li> ???????????????<li><a href="/home/index/5">5</a></li> ???????????????<li><a href="/home/index/6">6</a></li> ???????????????<li><a href="/home/index/7">7</a></li> ???????????????<li><a href="/home/index/8">8</a></li> ???????????????<li><a href="/home/index/9">9</a></li> ???????????<li><a href="/home/index/20">»</a></li> ?????????</ul>
源码和DEMO下载:
ChengChenXu.com.PageModel.rar
本文为博主原创,转载请保留出处:
http://chengchenxu.com/Article/22/mvc-fenye
asp.net MVC通用分页组件 使用方便 通用性强
原文地址:https://www.cnblogs.com/chengchenxu/p/8538834.html