做web開發一直用到分頁控件，自己也動手實現了個，使用用戶自定義控件。
翻頁后數據加載使用委托，將具體實現放在在使用分頁控件的頁面進行注冊。
有圖有真相，給個直觀的認識：
自定義分頁控件前臺代碼：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
|
<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> |
自定義分頁控件后臺代碼：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
|
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記錄狀態信息，因為導航控件會引起回發刷新。
分頁后的數據加載，使用事件。
事件的具體實現放在使用分頁控件的具體頁面中，進行事件的注冊。
測試分頁控件的前臺頁面：
|
1
2
3
4
5
6
7
8
9
|
<div style="margin-bottom:10px;"> 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> |
測試分頁控件的后臺代碼：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
|
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中注冊翻頁后的事件。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持服務器之家。
