zoukankan      html  css  js  c++  java
  • 无刷新分页 jquery.pagination.js

     序言


    这一款js分页使用起来很爽,自己经常用,做项目时总是要翻以前的项目看,不方便,这里就把他写出来方便自己以后粘帖,也希望能分享给大家。

    友情提示下:我有一片博客是用着个js实现的无刷新分页也很好用(这篇写的不是无刷新分页),链接地址为:无刷新分页 jquery.pagination.js


    参数说明


    参数名描述参数值
    maxentries 总条目数                           必选参数,整数
    items_per_page 每页显示的条目数                       可选参数,默认是10
    num_display_entries 连续分页主体部分显示的分页条目数                       可选参数,默认是10
    current_page 当前选中的页面                      可选参数,默认是0,表示第1页
    num_edge_entries 两侧显示的首尾分页的条目数                      可选参数,默认是0
    link_to 分页的链接                  字符串,可选参数,默认是"#"
    prev_text “前一页”分页按钮上显示的文字                 字符串参数,可选,默认是"Prev"
    next_text “下一页”分页按钮上显示的文字                字符串参数,可选,默认是"Next"
    ellipse_text 省略的页数用什么文字表示                   可选字符串参数,默认是"…"
    prev_show_always 是否显示“前一页”分页按钮           布尔型,可选参数,默认为true,即显示“前一页”按钮
    next_show_always 是否显示“下一页”分页按钮           布尔型,可选参数,默认为true,即显示“下一页”按钮
    callback 回调函数              当点击链接的时候此函数被调用,此函数接受两个参数,新一页的id和pagination容器(一个DOM元素)。如果回调函数返回false,则pagination事件停止执行

    插件代码


    js代码

    View Code

    css代码(有好几款样式供你选择,不错的)

    View Code

    前端代码


    复制代码
     <script src="../js/jquery.pagination.js" type="text/javascript"></script>
        <link href="../css/pagination.css" rel="stylesheet" type="text/css" />
       <script type="text/javascript">
            $(function () {
                    function pageselectCallback(page_id, jq) {
                        //alert(page_id); 回调函数,进一步使用请参阅说明文档
                    }
                    $("#Pagination").pagination(<%=pcount%>, {
                        callback: pageselectCallback,//PageCallback() 为翻页调用次函数。
                        prev_text: " 上一页",
                        next_text: "下一页 ",
                        items_per_page: <%=pagesize %>, //每页的数据个数
                        num_display_entries: 3, //两侧首尾分页条目数
                        current_page: <%=page%>,   //当前页码
                        num_edge_entries: 2, //连续分页主体部分分页条目数
                        link_to:"?page=__id__"
                    });
                    InterlacesColor(); //隔行换色(这个不是分页里面的js方法)
                });
              
        </script>
    
          <asp:Repeater ID="Rpt_UserList" runat="server">
                <ItemTemplate>
    <tr>
    
                        <td>
                            <%# Eval("UserName")%>
                        </td> 
                    </tr>
                <ItemTemplate>
           </asp:Repeater>
    
     <div id="Pagination" class="right flickr"></div>
    复制代码

    后台代码:


    复制代码
     protected int pcount = 0;                                   //总条数
            protected int page = 0;                                     //当前页
            protected int pagesize = 5;                                //设置每页显示的大小
            protected void Page_Load(object sender, EventArgs e)
            {
                if (!int.TryParse(Request.Params["page"] as string, out this.page))
                {
                    page = 0;
                }
             }
    
     #region 数据分页
            public void PageBind(string where,string order)
            {            
                bll = new UserAccount();
                ds = new DataSet();
                pcount = bll.GetPageCount(where);
                ds = bll.GetDataByPage(page * pagesize,(page+1)*pagesize,order,where);            
                if (ds != null && ds.Tables[0].Rows.Count > 0)
                {
                    Rpt_UserList.DataSource = ds;
                    Rpt_UserList.DataBind();
                }
    
            }
            #endregion
    复制代码

    样式效果展示:


     <div id="Pagination" class="flickr"></div>

     <div id="Pagination" class="meneame"></div> 

     <div id="Pagination" class="scott"></div> 

     <div id="Pagination" class="quotes"></div> 

     <div id="Pagination" class="black"></div> 

    好了在此就不疼了,自己用哪一款样式自己找吧,css里面有好多,不够用了,自己也可以修改为自己喜欢的样式。

    再次友情链接:无刷新分页 jquery.pagination.js



    补充: 多参数问题   (我的解决方案如下,谁有更好的可以分享下。)



    复制代码
     $(function () {
              function pageselectCallback(page_id, jq) {                      
                           TranUrl(page_id);
              }
              $("#Pagination").pagination(<%=pcount%>, {
                  callback: pageselectCallback,//PageCallback() 为翻页调用次函数。
                  prev_text: " 上一页",
                  next_text: "下一页 ",
                  items_per_page: <%=pagesize %>, //每页的数据个数
                  num_display_entries: 3, //两侧首尾分页条目数
                  current_page: <%=page%>,   //当前页码
                  num_edge_entries: 2, //连续分页主体部分分页条目数
              });
    
                        //通过修改url来达到分页效果。
                        function  TranUrl(page_id){
                           var url=location.href;
                             var star;
                             if(url.indexOf("aspx?")>0)
                             {
                                if(url.indexOf("&page=")>0)
                                    {                    
                                        star=url.indexOf("&page=");
                                            url=url.substring(0,star);
                                            location.href=url+"&page="+page_id;
                                    }
                                    else{
                                        location.href=url+"&page="+page_id;
                                    }
                             }
                             else{
                               location.href=url+"?page="+page_id;
                             }
                        }
          });
    复制代码
  • 相关阅读:
    chrome浏览器解析xml
    CuteEditor报错 空引用错误
    猫哥网络编程系列:HTTP PEM 万能调试法
    猫哥网络编程系列:详解 BAT 面试题
    全新 Mac 安装指南(编程篇)(环境变量、Shell 终端、SSH 远程连接)
    全新 Mac 安装指南(通用篇)(推荐设置、软件安装、推荐软件)
    魅族手机浏览器兼容性调优最佳实践
    使用 nvm 管理不同版本的 node 与 npm
    一种让 IE6/7/8 支持 media query 响应式设计的方法
    排列组合算法的javascript实现
  • 原文地址:https://www.cnblogs.com/h5monkey/p/5817211.html
Copyright © 2011-2022 走看看