自学MVC（十）：自己写的通用的JS分页控件-2009年05月27日

在asp.net webform 里有很多分页控件,比如aspnetpager等.然后在mvc开发模式下,这些控件不太合适了,所以我就自己写了一个.
第一个版本,有刷新 htmlhelper版:
这里用了c#3.0里的扩展方法.
public static class CutePage
{

/// <summary>
/// 分页Pager显示
/// </summary>
/// <param name="html"></param>
/// <param name="currentPageStr">标识当前页码的QueryStringKey</param>
/// <param name="pageSize">每页显示</param>
/// <param name="totalCount">总数据量</param>
/// <returns></returns>
public static string Pager(this HtmlHelper html, string currentPageStr, int pageSize, int totalCount)
{
var queryString = html.ViewContext.HttpContext.Request.QueryString;
int currentPage = 1; //当前页
var totalPages = Math.Max((totalCount + pageSize - 1) / pageSize, 1); //总页数
var dict = new System.Web.Routing.RouteValueDictionary(html.ViewContext.RouteData.Values);
var output = new System.Text.StringBuilder();
if (!string.IsNullOrEmpty(queryString[currentPageStr]))
{
//与相应的QueryString绑定
foreach (string key in queryString.Keys)
if (queryString[key] != null && !string.IsNullOrEmpty(key))
dict[key] = queryString[key];
int.TryParse(queryString[currentPageStr], out currentPage);
}
else
{
//如果是第一次访问本页，没有currentPageStr参数,添加currentPageStr=1
if (!dict.ContainsKey(currentPageStr))
{
dict.Add(currentPageStr, 1);
}
int.TryParse(dict[currentPageStr].ToString(), out currentPage);
}
if (currentPage <= 0) currentPage = 1;
if (totalPages > 1)
{
if (currentPage != 1)
{
//处理首页连接
dict[currentPageStr] = 1;
output.AppendFormat("{0} ", html.RouteLink("首页", dict));
}
if (currentPage > 1)
{
//处理上一页的连接
dict[currentPageStr] = currentPage - 1;
output.Append(html.RouteLink("上页", dict));
}
else
{
output.Append("上页");
}
output.Append(" ");
int currint = 5;
for (int i = 0; i <= 10; i++)
{
//一共最多显示10个页码，前面5个，后面5个
if ((currentPage + i - currint) >= 1 && (currentPage + i - currint) <= totalPages)
if (currint == i)
{
//当前页处理
output.Append(string.Format("{0}", currentPage));
}
else
{
//一般页处理
dict[currentPageStr] = currentPage + i - currint;
output.Append(html.RouteLink((currentPage + i - currint).ToString(), dict));
}
output.Append(" ");
}
if (currentPage < totalPages)
{
//处理下一页的链接
dict[currentPageStr] = currentPage + 1;
output.Append(html.RouteLink("下页", dict));
}
else
{
output.Append("下页");
}
output.Append(" ");
if (currentPage != totalPages)
{
dict[currentPageStr] = totalPages;
output.Append(html.RouteLink("末页", dict));
}
output.Append(" ");
}
output.AppendFormat("{0} / {1}", currentPage, totalPages);//这个统计加不加都行
return output.ToString();
}
}

在页面上的调用方式 <%= Html.Pager("pageindex",10,itemscout)%>

当然我下面要隆重推出无刷新Jquery版的分页控件:
/*生成分页导航
pageindex--当前页索引
pageSize --每页多少行数据
totalCount--总行数
ajaxMethod--jquery写的无刷新获取数据的js方法
target---分页在页面输出的页面元素,比如<div>里
*/
function initePageNav(pageindex,pageSize,totalCount,ajaxMethod,target) {

var currentPage =pageindex+1; //当前页
var totalPages = parseInt((totalCount + pageSize - 1) / pageSize); //总页数
var output="";
output += "第" + ((currentPage - 1) * pageSize + 1) + "-" + currentPage * pageSize + "条 " + "共" + totalCount + "条";
output += " ";
if (currentPage <= 0) currentPage = 1;
if (totalPages > 1)
{
if (currentPage != 1)
{
//处理首页连接
output += "<a href=\"javascript:" + ajaxMethod + "(0)\">首页</a>";
}
output += " ";
if (currentPage > 1)
{
//处理上一页的连接
output += "<a href=\"javascript:" + ajaxMethod + "(" + (currentPage - 2) + ")\">上页</a>";
}
else
{
output+="上页";
}
output += " | ";
var currint = 5;
for (var i = 0; i <= 10; i++)
{
//一共最多显示10个页码，前面5个，后面5个
if ((currentPage + i - currint) >= 1 && (currentPage + i - currint) <= totalPages)
if (currint == i)
{
//当前页处理
output += currentPage;
output += " ";
}
else
{
//一般页处理
output += "<a href=\"javascript:" + ajaxMethod + "(" + (currentPage + i - currint - 1) + ")\">" + (currentPage + i - currint) + "</a>";
output += " ";
}

}
if (currentPage < totalPages)
{
//处理下一页的链接
output += "| <a href=\"javascript:" + ajaxMethod + "(" + (currentPage) + ")\">下页</a>";
}
else
{
output += "| 下页";

}
output += " ";
if (currentPage != totalPages)
{

output+="<a href=\"javascript:"+ajaxMethod+"("+(totalPages-1)+")\">末页</a>";
}
output += " </span>";
}
if (totalCount>0)
{
$("#"+target).text("");
$("#" + target).append(output);

}
}
这个函数配合无刷新取数据的方法如下使用:
<script language="javascript">
$().ready(function() {
//页面初始化时获取评论内容
getComments(0);

});
//获取评论内容
function getComments(pageindex) {
$.post("http://www.cnblogs.com/Services/GetComments.ashx", { Mid: <%= Model.Mid %>, PageIndex: pageindex, PageSize: 10},
function(data, textStatus) {
$("#videobodycommentlist").text("");//先清空页面数据的内容
$("#videobodycommentlist").append(data.result);//把获取好的数据填充
initePageNav(pageindex,10,data.count,"getComments","commentPage");//调用JS分页方法
}, "json");
}
</script>