实战MvcPager（PagerOptions自定义样式同、异步）

实战MvcPager（PagerOptions⾃定义样式同、异步）
MVC下的分页控件MvcPager⽤起来简直太嗨呸了，两句代码实现⼀个分页，⽽且需要改变样式的时候直接构造PagerOptions类
实战⽆需多说，拿来⽤之即可。

个⼈觉得对性能影响不⼤的东西，如果不是感受其编码思想，只需了解使⽤功能，⽆需深⼊，就和⼈的⽣命本来就有限，取舍也因⼈⽽异
⼀、⾸先是简单拼接字符串的分页CssPager，直接改⼋改⼋样式和字符串就能⽤了
封装好的Html扩展⽅法：
/// <summary>
/// 分页
/// </summary>
/// <param name="htmlhelper"></param>
/// <param name="pageSize"></param>
/// <param name="currentPage"></param>
/// <param name="totalCount"></param>
/// <param name="href"></param>
/// <returns></returns>
public static string GetPager(this HtmlHelper htmlhelper, int pageSize, int currentPage, int totalCount, string href)
{
pageSize = pageSize == 0 ? 3 : pageSize;
var totalPages = Math.Max((totalCount + pageSize - 1) / pageSize, 1); //总页数
var output = new StringBuilder();
if (totalPages > 1)
{
if (currentPage != 1)
{//处理⾸页连接
output.AppendFormat("<li><a class='news_next3' href='{0}pageIndex=1&pageSize={1}'>⾸页</a></li> ", href, pageSize);
}
else
{
output.Append("<li><a class='news_next3' style='cursor:default;background-color:#C4C4C4;' href='javascript:void(0)'>⾸页</a></li> ");
}
if (currentPage > 1)
{//处理上⼀页的连接
output.AppendFormat("<li><a class='news_next3' href='{0}pageIndex={1}&pageSize={2}'> ↶ </a></li> ", href, currentPage - 1, pageSize);
}
else
{
output.Append("<li><a class='news_next3' style='cursor:default;background-color:#C4C4C4;' href='javascript:void(0)'> ↶ </a></li> ");
}
output.Append(" ");
int start = 0, end = 0, tmpStart = 0, tmpEnd = 0;
if (currentPage >= 1 && currentPage - 2 >= 1)
{
start = currentPage - 2;
}
else if (currentPage >= 1 && currentPage - 2 < 1)
{
start = 1;
tmpEnd = 2 - currentPage + 1;
}
if (totalPages >= currentPage && currentPage + 2 <= totalPages)
{
end = currentPage + 2;
}
else if (totalPages >= currentPage && currentPage + 2 > totalPages)
{
end = totalPages;
tmpStart = (currentPage + 2) - totalPages;
}
start = start - tmpStart < 1 ? 1 : start - tmpStart;
end = end + tmpEnd > totalPages ? totalPages : end + tmpEnd;
for (int i = start; i <= end; i++)
{
if (currentPage != i)
{
output.AppendFormat("<li><a class='news_next3' href='{0}pageIndex={1}&pageSize={2}'>{3}</a></li> ", href, i, pageSize, i);
}
else
{
output.AppendFormat("<li><a class='news_next2' href='{0}pageIndex={1}&pageSize={2}'>{3}</a></li> ", href, i, pageSize, i);
}
}
if (currentPage < totalPages)
{//处理下⼀页的链接
output.AppendFormat("<li><a class='news_next3' href='{0}pageIndex={1}&pageSize={2}'> ↷ </a></li> ", href, currentPage + 1, pageSize);
}
else
{
output.Append("<li><a class='news_next3' style='cursor:default;background-color:#C4C4C4;' href='javascript:void(0)'> ↷ </a></li> ");
}
output.Append(" ");
if (currentPage != totalPages)
{
output.AppendFormat("<li><a class='news_next3' href='{0}pageIndex={1}&pageSize={2}'>末页</a></li> ", href, totalPages, pageSize);
}
else
{
output.Append("<li><a class='news_next3' style='cursor:default;background-color:#C4C4C4;' href='javascript:void(0)'>末页</a></li> ");
}
output.Append(" ");
}
//output.AppendFormat("<p>共{0}条记录 {1}/{2} 页</p>", totalCount, currentPage, totalPages);
return output.ToString();
}
View中调⽤，样式包就不贴了，源码⾥有
@Html.Raw(Html.GetPager(3, Model.CurrentPageIndex, Model.TotalItemCount, string.Format("?cid={0}&nid={1}&", 1, 2)))
⼆、MvcPager两句代码搞定：Action中new PagedList（2.0版本直接调⽤IEnumerable<T>的ToPagedList扩展⽅法），view中调⽤MvcPager封装的Html.Pager扩展⽅法
Action:
public ActionResult Index(int pageIndex = 1, int pageSize = 3)
{
List<People> list = new List<People>() {
new People(){ ID=1,Name="lily",Age=16},
......
};
var data = list.Skip((pageIndex - 1) * pageSize).Take(pageSize);
PagedList<People> pl = new PagedList<People>(data, pageIndex, pageSize, list.Count);
if (Request.IsAjaxRequest())
{
return PartialView("_AjaxIndex", pl);
}
return View(pl);
}
1、默认显⽰的样式
@Html.Pager(Model, new PagerOptions()
{
PageIndexParameterName = "pageIndex",
ShowPageIndexBox = true,
PageIndexBoxType = PageIndexBoxType.DropDownList,
ShowGoButton = true,
PageIndexBoxWrapperFormatString = "跳转到第{0}页"
})
2、添加⼤部分样式都可以通过构造PagerOptions给属性赋值就能搞定，但是要给原⽣⽣成的A标签添加样式就需要修改源码了@Html.Pager(Model, new PagerOptions()
{
//分页外侧标签，默认为div
ContainerTagName = "ul",
//上、下⼀页 // "<span class=\"news_next3\"> ↶ </span>" HTML会被渲染
PrevPageText = " ↶ ",
NextPageText = " ↷ ",
//默认
//FirstPageText = "⾸页",
//LastPageText = "尾页",
//AlwaysShowFirstLastPageNumber = false,
//ShowPrevNext = true,
PageIndexParameterName = "pageIndex",
//显⽰下拉页
//ShowPageIndexBox = true,
//PageIndexBoxType = PageIndexBoxType.DropDownList,
//ShowGoButton = true,
//GoButtonText = "Go",
//PageIndexBoxWrapperFormatString = "跳转到第{0}页",
////⾸、末、上、下、页码的a标签，a标签外侧全部嵌套span
//PagerItemWrapperFormatString = "<span class=\"news_next3\">{0}</span>",
//当前页码（不包含⾸、末、上、下）嵌套span标签
CurrentPagerItemWrapperFormatString = "<li><span class=\"news_next2\">{0}</span></li>",
//其他页码（不包含⾸、末、上、下）嵌套span标签
NumericPagerItemWrapperFormatString = "<li><span class=\"news_next3\">{0}</span></li>",
//⾸、末、上、下（不包含页码）嵌套span标签，与上相反
NavigationPagerItemWrapperFormatString = "<li><span class=\"news_next3\">{0}</span></li>",
//pageIndex超出范围，⼀般直接修改url和删除掉最后⼀页数据时候发⽣
InvalidPageIndexErrorMessage = "页索引⽆效",
PageIndexOutOfRangeErrorMessage = "页索引超出范围"
})
3、图⽚右侧为AJAX分页，调⽤Ajax.Pager和Html.AjaxPager都是可以的，唯⼀需要注意的是把分页控件放到UpdateTargetId⾥⾯@Ajax.Pager(Model, new PagerOptions()
{
PageIndexParameterName = "pageIndex",
ShowPageIndexBox = true,
PageIndexBoxType = PageIndexBoxType.DropDownList,
ShowGoButton = true,
PageIndexBoxWrapperFormatString = "跳转到第{0}页"
}, new AjaxOptions() { UpdateTargetId = "upID" })。