最近因为给自己做一个网站(http://www.yatui88.cn),自己写了一个简单的分页控件。在这里跟大家分享一下。在网上找过很多分页控件,觉得都不错。就是想自己学着写一个,提升自己编码能力。有意见的可以提提,帮我提升自己。废话不多说了,回归正题。
分页控件一般由几个参数组成:当前页码、页面显示条数、总页数;这几个是做分页控件必不可少的参数。
我在用户控件中定义了如下参数:
//页码 public int PageIndex { get; private set; } //数据总页数 public int PageCount { get; private set; } //页面显示条数 public int PageSize { get; private set; } //总条数 public int AllRecordCount { get; private set; } public PageEnum PageEvent { get; private set; }
为方便取值我设置了公共参数“public”。
剩下的就是对分页控件的显示做分解,这个我做了如下分析,总页数大于或等于6时不能显示太多页码,显示太多会印象页面的显示,需省略一部分。所以用户控件的页面做了循环判断处理,具体页面代码如下:
<input runat="server" id="hidPageIndex" type="hidden" value="1" /> <asp:Button runat="server" ID="btnHome" Text="首页" /> <asp:Button runat="server" ID="btnPrev" Text="上一页" /> <% if (PageCount < 1 || PageCount == 0) { %> <a href="#" style="color: red" onclick="Change('1')">1</a> <% } else { if (PageCount <= 6) { for (int i = 1; i <= PageCount; i++) { if (i == PageIndex) { %> <a href="#" style="color: red" onclick="Change('<%=i %>')"><%=i%></a> <% } else { %> <a href="#" onclick="Change('<%=i %>')"><%=i%></a> <%} } } else { for (int j = 1; j <= PageCount; j++) { if (PageIndex < 4) { if (j == PageIndex) { %> <a href="#" style="color: red" onclick="Change('<%=j %>')"><%=j%></a> <%} else if (j >= PageCount - 1) { %> <a href="#" onclick="Change('<%=j %>')"><%=j%></a> <% } else if (j == 5) { %> ………… <% } else if (j <= 4) { %> <a href="#"><%=j%></a> <% } } else { if (j == PageIndex) { %> <a href="#" style="color: red" onclick="Change('<%=j %>')"><%=j%></a> <% } else if (j == PageIndex - 3) { if (PageIndex - 3 > 1) { %> …… <% } else { %> <a href="#" onclick="Change('<%=j %>')"><%=j%></a> <% } } else if (j == 1) { %> <a href="#" onclick="Change('<%=j %>')"><%=j%></a> <% } else if (j == PageIndex + 3) { if (PageIndex + 3 < PageCount) { %> …… <% } else { %> <a href="#" onclick="Change('<%=j %>')"><%=j%></a> <% } } else if (j >= PageIndex - 3 && j <= PageIndex + 3) { %> <a href="#" onclick="Change('<%=j %>')"><%=j%></a> <% } else if (j >= PageCount - 1) { %> <a href="#" onclick="Change('<%=j %>')"><%=j%></a> <% } } } } }%> <asp:Button runat="server" ID="btnNext" Text="下一页" /> <asp:Button runat="server" ID="btnLast" Text="末页" /> <asp:TextBox runat="server" ID="txtPage" Width="40px"></asp:TextBox> <asp:Button runat="server" ID="btnGo" Text="Go" /> <div style="display:none"><asp:Button runat="server" ID="btnPage" Text="选择的页码" /></div> <script type="text/javascript"> function Change(pindex) { $("[id$='hidPageIndex']").val(pindex); //alert(pindex); //$("[id$='btnPage']").click(); document.getElementById("<%=btnPage.ClientID%>").click(); //alert(i); } </script>
js脚本部分实现了前台调用后台的事件。
记住:<div style="display:none"><asp:Button runat="server" ID="btnPage" Text="选择的页码" /></div>这部分不能使用“visible=false”
后台代码我实现的方式如下:
//页面设置初始参数,并初始化事件
public static readonly int DEFAULT_PAGE_FIRST = 1; //默认显示条数 public static readonly int DEFAULT_PAGE_SIZE = 20; public EventHandler<PageBtnEventArgs> PageBtnEventHandler = null; protected void Page_Load(object sender, EventArgs e) {
this.btnPrev.Click += new EventHandler(btn_PagePre); this.btnHome.Click += new EventHandler(btn_PagePre); this.btnNext.Click += new EventHandler(btn_PagePre); this.btnLast.Click += new EventHandler(btn_PagePre); this.btnGo.Click += new EventHandler(btn_PagePre); this.btnPage.Click += new EventHandler(btn_PagePre); }
对页面的选择值进行重新提交设置
protected void btn_PagePre(object sender, EventArgs e) { if (PageBtnEventHandler == null) { return; } Button btnTmp = sender as Button; //Response.Write("<Script Language='JavaScript'>window.alert('" + btnTmp.Text + "');</script>"); if (btnTmp == null) { return; } if (btnHome.Text == btnTmp.Text) { PageEvent = PageEnum.First; PageIndex = DEFAULT_PAGE_FIRST; } else if (btnPrev.Text == btnTmp.Text) { PageEvent = PageEnum.Previous; PageIndex = Convert.ToInt32(this.hidPageIndex.Value); if (PageIndex != 1) { PageIndex--; this.hidPageIndex.Value = PageIndex.ToString(); } } else if (btnNext.Text == btnTmp.Text) { PageEvent = PageEnum.Next; PageIndex = Convert.ToInt32(this.hidPageIndex.Value); if (PageIndex != PageCount) { PageIndex++; this.hidPageIndex.Value = PageIndex.ToString(); } } else if (btnLast.Text == btnTmp.Text) { PageEvent = PageEnum.Last; PageIndex = PageCount; } else if (btnGo.Text == btnTmp.Text) { //Response.Write("<Script Language='JavaScript'>window.alert('" + txtPage.Text + "');</script>"); PageEvent = PageEnum.Goto; try { int pageI = Convert.ToInt32(txtPage.Text); if (pageI > PageCount || pageI <= 0) { return; } else { PageIndex = pageI; hidPageIndex.Value = PageIndex.ToString(); } } catch (Exception e_) { return; } } else { PageIndex = int.Parse(this.hidPageIndex.Value); } PageBtnEventHandler(this, new PageBtnEventArgs(PageEvent, PageIndex, PageCount, PageSize, AllRecordCount)); }
/// <summary> /// 设置分页控件属性值 /// </summary> /// <param name="pageIndex">当前页码</param> /// <param name="pageCount">总页数</param> /// <param name="pageSize">每页记录数</param> /// <param name="allRecordCount">总记录数</param> public void SetDefaultPage(int pageIndex, int pageCount, int pageSize, int allRecordCount) { PageIndex = pageIndex; PageCount = pageCount; PageSize = pageSize; AllRecordCount = allRecordCount; //txtPage.Text = pageIndex.ToString(); //txtNum.Text = PageSize.ToString(); //this.lbRowcount.Content = string.Format(DEFAULT_PAGE_FORMAT_STRING, pageCount); //ResetButton(); }
/// <summary> /// 配置事件(分页按钮事件) /// </summary> public class PageBtnEventArgs : EventArgs { public PageEnum Page { get; private set; } public int PageIndex { get; private set; } public int PageCount { get; private set; } public int PageSize { get; private set; } public int AllRecordCount { get; private set; } public PageBtnEventArgs() { } public PageBtnEventArgs(PageEnum page, int pageIndex) { Page = page; PageIndex = pageIndex == 0 ? PageIndex : pageIndex; } public PageBtnEventArgs(PageEnum page, int pageIndex, int pageCount) { Page = page; PageIndex = pageIndex == 0 ? pageIndex : PageIndex; PageCount = pageCount; } public PageBtnEventArgs(PageEnum page, int pageIndex, int pageCount, int pageSize) { Page = page; PageIndex = pageIndex == 0 ? pageIndex : PageIndex; PageCount = pageCount; PageSize = pageSize; } public PageBtnEventArgs(PageEnum page, int pageIndex, int pageCount, int pageSize, int allRecordCount) { Page = page; PageIndex = pageIndex; PageCount = pageCount; PageSize = pageSize; AllRecordCount = allRecordCount; } }具体实现的方式就是这样,有不懂的可以提问,如觉得不好的,可以说,大家一起优化。这里只能实现提交后台的方式,不能使用Ajax异步请求。若要做不刷新界面,此分页控件不能使用哦。