自学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>

<!--v:3.2-->

   本文版权属于www.51kancctv.com，williams所有，首发http://www.cnblogs.com/，转载请注明出处。

评论

2 楼 早上好朋友 2011-10-05  

引用

1 楼 早上好朋友 2011-10-05  

[flash=200,200][/flash][url][/url][img][/img]

[*]

引用

[u][/u][i][/i]

引用

[*]

[img][/img][flash=200,200][/flash]