zoukankan      html  css  js  c++  java
  • JS分页控件

    在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);//把获取好的数据填充

      }, "json");
         }

    </script>
    http://www.cnblogs.com/wangergo/archive/2009/06/20/1507366.html
  • 相关阅读:
    ajax 中$.each(json,function(index,item){ }); 中的2个参数表示什么意思?
    后台传list到前台,前台怎么解析,怎么将解析的数据填充到已经存在列名table中
    mybatis如何直接 执行传入的任意sql语句 并按照顺序取出查询的结果集
    虚拟机突然无法 联网,最简单及最可能的原因
    windows10,nodejs安装步骤
    Windows下Git与Node.js的安装
    Windows10下安装Git的详细教程
    django-admin.py startproject testdj 失败 没有工程文件夹
    在Pythonfor循环中如何获取循环次数?
    Pygal之世界地图绘制from pygal.i18n import COUNTRIES 报错的解决办法
  • 原文地址:https://www.cnblogs.com/guanjie20/p/1676124.html
Copyright © 2011-2022 走看看