源码地址:https://github.com/SeaLee02/FunctionModule/blob/master/UploadFiles/WebDemo/FenYE/FenYeDemo.aspx
上次介绍过了我们用代码生成的刷新分页
去看看 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>
分页插件
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(); } }
效果:
刷新的就介绍这里,下篇就说说无刷新的。