jQuery Pagination分页插件--刷新

时间:2022-12-09 15:19:26

 源码地址:https://github.com/SeaLee02/FunctionModule/blob/master/UploadFiles/WebDemo/FenYE/FenYeDemo.aspx

上次介绍过了我们用代码生成的刷新分页

去看看  jQuery Pagination分页插件--无刷新

jQuery Pagination分页插件--刷新

我们对这个问题进行了处理,并不是一次全部取出数据,因为这样第一次加载会很慢。

我们的做法跟之前介绍的刷新分页是一样的,点第几页我们就取第几页的数据。

jQuery Pagination分页插件--刷新

 

页面:

jQuery Pagination分页插件--刷新 分页样式

 

 <div class="tableDiv">
            <asp:Repeater ID="repList" runat="server">
                <HeaderTemplate>
                    <table>
                        <tr>
                            <th>序号</th>
                            <th>名字</th>
                            <th>父级ID</th>
                            <th>显示</th>
                        </tr>
                </HeaderTemplate>
                <ItemTemplate>
                    <tr>
                        <td><%# RowIndex++ %></td>
                        <td><%# Eval("Name")%></td>
                        <td><%# Eval("Pid") %></td>
                        <td><%# Eval("LevalNum") %></td>
                    </tr>
                </ItemTemplate>
            </asp:Repeater>
        </div>
        <div class="pagelistbody boxsizing">
            <div class="pagebox">
                <div class="page flickr">
                </div>
            </div>
            <div class="pagemsg">
                <p>共<span><%= pcount %></span>条数据,共<span><%=Math.Ceiling(decimal.Parse(pcount.ToString())/pagesize) %></span>页,当前第<span><%= page+1 %></span>页</p>
            </div>
        </div>

 jQuery Pagination分页插件--刷新  分页插件

js

 

 <script>
            $(function () {
                $("table").tableUI();

                //分页插件方法
                $(".page").pagination(<%= pcount %>, {     
                    num_edge_entries:1,  //边缘页数
                    num_display_entries:4,  //主体页数
                    callback:pageCallback,  //回调函数  
                    items_per_page:<%= pagesize%>,      //每页显示条数                   
                    current_page:<%= page%>,  //当前页                  
                    prev_text: "上一页",
                    next_text: "下一页",
                    link_to:"?page=__id__<%= strUrl.ToString()%>" //分页链接   strUrl是需要传递的参数,例如:条件过滤查询   get提交                
            });
            //回调函数    
                function pageCallback(page_id,jq){
                    //page_id  为 当前页码-1
                    return true;  //返回真就刷新,返回假没效果
                }
            });                      
        </script>

 

后台:

   public int RowIndex = 1;
        public int page=0;
        public int pcount=0;
        public int pagesize=2;

        public string strUrl=""; //如果用到查询 这个就是:&A=a&B=b&C=c .... protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                page = Request.QueryString["page"]==null?0: Convert.ToInt32(Request.QueryString["page"].ToString());
                pcount = new FunctionDemo.BLL.Category().GetRecordCount("1=1");
                repList.DataSource = new FunctionDemo.BLL.Category().GetPageList("1=1", pagesize, page);
                repList.DataBind();

            }
        }

效果:

jQuery Pagination分页插件--刷新

 

 

 jQuery Pagination分页插件--刷新

刷新的就介绍这里,下篇就说说无刷新的。