做web開發一直用到分頁控件,自己也動手實現了個,使用用戶自定義控件。
翻頁後數據加載使用委托,將具體實現放在在使用分頁控件的頁面進行注冊。
有圖有真相,給個直觀的認識:
自定義分頁控件前台代碼:
<style type="text/css"> .pager-m-l { margin-left: 10px; } .pager { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; color: #333; background-color: #fff; text-align: center; border: 1px solid #eee; border-radius: 5px; height: 30px; line-height: 30px; margin: 10px auto; width: 650px; } .font-blue { color: #5bc0de; } .pager a { color: #5bc0de; text-decoration: none; } .pager a.gray { color: #808080; } .pager-num { width: 30px; text-align: center; } .pager-form-control { color: #555; background-color: #fff; background-image: none; border: 1px solid #ccc; border-radius: 4px; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s; -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; padding: 2px 0px; margin: 0px 2px; } .pager-form-control:focus { border-color: #66afe9; outline: 0; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6); box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6); } .btn { display: inline-block; padding: 2px; font-weight: normal; text-align: center; white-space: nowrap; vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-image: none; border: 1px solid transparent; border-radius: 4px; } .btn-default { color: #333; background-color: #fff; border-color: #ccc; } </style> <div class="pager"> <span>當前<asp:Label runat="server" ID="labCurrentPageIndex" CssClass="font-blue"></asp:Label>/<asp:Label runat="server" CssClass="font-blue" ID="labTotalNumberOfPages"></asp:Label>頁</span> <span class="pager-m-l">共<asp:Label runat="server" CssClass="font-blue" ID="labRecordCount"></asp:Label>條記錄</span> <span class="pager-m-l"> <asp:LinkButton runat="server" ID="labFirstPage" OnClick="labFirstPage_Click">首頁</asp:LinkButton> | <asp:LinkButton runat="server" ID="labPreviousPage" OnClick="labPreviousPage_Click">上一頁</asp:LinkButton> |<asp:LinkButton runat="server" ID="labNextPage" OnClick="labNextPage_Click">下一頁</asp:LinkButton> |<asp:LinkButton runat="server" ID="labLastPage" OnClick="labLastPage_Click">尾頁</asp:LinkButton> </span> <span class="pager-m-l">跳至<asp:TextBox runat="server" ID="txtPageNum" CssClass="pager-form-control pager-num">1</asp:TextBox>頁 <asp:Button runat="server" Text="GO" ID="btnGo" CssClass="btn btn-default" OnClick="btnGo_Click" /></span> <span class="pager-m-l"> <asp:DropDownList runat="server" ID="ddlPageSize" CssClass="pager-form-control" AutoPostBack="true" OnSelectedIndexChanged="ddlPageSize_SelectedIndexChanged"> <asp:ListItem Text="10" Value="10"></asp:ListItem> <asp:ListItem Text="20" Value="20"></asp:ListItem> <asp:ListItem Text="30" Value="30"></asp:ListItem> <asp:ListItem Text="50" Value="50"></asp:ListItem> <asp:ListItem Text="100" Value="100"></asp:ListItem> </asp:DropDownList>條/每頁</span> </div>
自定義分頁控件後台代碼:
private const string viewStateCurrentPageIndex = "CurrentPageIndex"; private const string viewStateRecordCount = "RecordCount"; public delegate void PageChangedHandle(); public event PageChangedHandle OnPageChanged; public int PageSize { get { return Convert.ToInt32(ddlPageSize.SelectedValue); } } public int CurrentPageIndex { set { ViewState[viewStateCurrentPageIndex] = value; } get { if (ViewState[viewStateCurrentPageIndex] == null) { ViewState[viewStateCurrentPageIndex] = 1; } return Convert.ToInt32(ViewState[viewStateCurrentPageIndex]); } } public int RecordCount { get { if (ViewState[viewStateRecordCount] == null) { ViewState[viewStateRecordCount] = 0; } return Convert.ToInt32(ViewState[viewStateRecordCount]); } set { ViewState[viewStateRecordCount] = value; } } private int TotalNumberOfPages { get { return RecordCount % PageSize == 0 ? RecordCount / PageSize : (RecordCount / PageSize) + 1; } } protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { } } protected void labFirstPage_Click(object sender, EventArgs e) { CurrentPageIndex = 1; this.DataBind(); } protected void labPreviousPage_Click(object sender, EventArgs e) { CurrentPageIndex -= 1; this.DataBind(); } protected void labNextPage_Click(object sender, EventArgs e) { CurrentPageIndex += 1; this.DataBind(); } protected void labLastPage_Click(object sender, EventArgs e) { CurrentPageIndex = TotalNumberOfPages; this.DataBind(); } protected void btnGo_Click(object sender, EventArgs e) { int pageNum = 1; bool isNum = Int32.TryParse(txtPageNum.Text, out pageNum); if (isNum) { CurrentPageIndex = Math.Min(pageNum, TotalNumberOfPages); } this.DataBind(); } protected void ddlPageSize_SelectedIndexChanged(object sender, EventArgs e) { CurrentPageIndex = 1; this.DataBind(); } protected override void DataBind(bool raiseOnDataBinding) { BindPager(); base.DataBind(raiseOnDataBinding); if (OnPageChanged != null) { OnPageChanged(); } } private void BindPager() { labCurrentPageIndex.Text = CurrentPageIndex.ToString(); labTotalNumberOfPages.Text = TotalNumberOfPages.ToString(); labRecordCount.Text = RecordCount.ToString(); SetNavigateEnabled(); } private void SetNavigateEnabled() { txtPageNum.Text = CurrentPageIndex.ToString(); labFirstPage.Enabled = true; labPreviousPage.Enabled = true; labNextPage.Enabled = true; labLastPage.Enabled = true; labFirstPage.CssClass = "font-blue"; labPreviousPage.CssClass = "font-blue"; labNextPage.CssClass = "font-blue"; labLastPage.CssClass = "font-blue"; if (CurrentPageIndex == 1) { labFirstPage.Enabled = false; labPreviousPage.Enabled = false; labFirstPage.CssClass = "gray"; labPreviousPage.CssClass = "gray"; } if (CurrentPageIndex == TotalNumberOfPages) { labNextPage.Enabled = false; labLastPage.Enabled = false; labNextPage.CssClass = "gray"; labLastPage.CssClass = "gray"; } if (RecordCount == 0) { labFirstPage.Enabled = false; labPreviousPage.Enabled = false; labFirstPage.CssClass = "gray"; labPreviousPage.CssClass = "gray"; labNextPage.Enabled = false; labLastPage.Enabled = false; labNextPage.CssClass = "gray"; labLastPage.CssClass = "gray"; } }
當前頁碼、總共多少條記錄使用ViewState記錄狀態信息,因為導航控件會引起回發刷新。
分頁後的數據加載,使用事件。
事件的具體實現放在使用分頁控件的具體頁面中,進行事件的注冊。
測試分頁控件的前台頁面:
<div > text: <asp:TextBox ID="txtContent" runat="server"></asp:TextBox> <asp:Button ID="btnQuery" runat="server" Text="查 詢" OnClick="btnQuery_Click"/> </div> <div> <asp:GridView ID="gvList" runat="server" Width="99%" AutoGenerateColumns="true"></asp:GridView> <uc1:PagerControl runat="server" ID="Pager" /> </div>
測試分頁控件的後台代碼:
private const string dtSourceViewStateKey = "dtSourceViewStateKey"; protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { BindData(true); } Pager.OnPageChanged += OnPageChanged; } private void BindData(bool bindRecordCount) { DataTable dtSource = GetDataSource(); var source = dtSource.AsEnumerable(); if (!string.IsNullOrEmpty(txtContent.Text.Trim())) { source = source.Where(w => w.Field<string>("text").Contains(txtContent.Text.Trim())); } if (bindRecordCount) { Pager.RecordCount = source.Count(); Pager.CurrentPageIndex = 1; Pager.DataBind(); } gvList.DataSource = source .Skip((Pager.CurrentPageIndex - 1) * Pager.PageSize) .Take(Pager.PageSize) .Select(r => new { id = r["id"].ToString(), text = r["text"].ToString() }) .ToList(); gvList.DataBind(); } private void OnPageChanged() { BindData(false); } private DataTable InitDataTable() { DataTable dtSource = new DataTable(); DataColumn id = new DataColumn("id"); id.AutoIncrement = true; id.AutoIncrementSeed = 1; dtSource.Columns.Add(id); dtSource.Columns.Add("text"); for (int i = 1; i <= 1000; i++) { DataRow dr = dtSource.NewRow(); dr["text"] = "內容" + i; dtSource.Rows.Add(dr); } return dtSource; } private DataTable GetDataSource() { if (ViewState[dtSourceViewStateKey] == null) { ViewState[dtSourceViewStateKey] = InitDataTable(); } return ViewState[dtSourceViewStateKey] as DataTable; } protected void btnQuery_Click(object sender, EventArgs e) { BindData(true); }
在Page_Load中注冊翻頁後的事件。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持幫客之家。