對(duì)于大量數(shù)據(jù)的查詢和展示使用分頁(yè)是一種不錯(cuò)的選擇,這篇文章簡(jiǎn)要介紹下自己實(shí)現(xiàn)分頁(yè)查詢的思路。
分頁(yè)需要三個(gè)變量:數(shù)據(jù)總量、每頁(yè)顯示的數(shù)據(jù)條數(shù)、當(dāng)前頁(yè)碼。
1
2
3
4
5
|
//數(shù)據(jù)總量 int dataCount; //每頁(yè)顯示的數(shù)據(jù)條數(shù) int pageDataCount; int pageNumber; |
根據(jù)數(shù)據(jù)總量和每頁(yè)顯示的數(shù)據(jù)條數(shù)計(jì)算出總頁(yè)數(shù),根據(jù)當(dāng)前頁(yè)碼和每頁(yè)顯示的數(shù)據(jù)條數(shù)計(jì)算出從數(shù)據(jù)庫(kù)中讀取數(shù)據(jù)的起始行號(hào)和結(jié)束行號(hào)。
1
2
3
4
|
//總頁(yè)數(shù) int pageCount = ( int )Math.Ceiling(dataCount/ (pageDataCount* 1.0)); int startLine = (pageNumber - 1) * PageDataCount + 1; int endLine=startLine + PageDataCount - 1; |
對(duì)于數(shù)據(jù)庫(kù)的查詢操作使用輕量級(jí)ORM框架Dapper來(lái)實(shí)現(xiàn),具體代碼如下:
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
|
protected IDbConnection CreateConnection() { IDbConnection dbConnection = new SqlConnection(ConnectionString); dbConnection.Open(); return dbConnection; } //獲取數(shù)據(jù)庫(kù)中數(shù)據(jù)的總條數(shù) public virtual int QueryDataCount( string tableName) { using (IDbConnection dbConnection = CreateConnection()) { var queryResult = dbConnection.Query< int >( "select count(Id) from " + tableName); if (queryResult == null || !queryResult.Any()) { return 0; } return queryResult.First(); } } public virtual IEnumerable<T> RangeQuery<T>( string tableName, int startline, int endline) { if ( string .IsNullOrEmpty(tableName)) { throw new ArgumentNullException( "表名不得為空或null" ); } if (startline <= 0) { throw new ArgumentOutOfRangeException( "起始行號(hào)必須大于0" ); } if (endline - startline < 0) { throw new ArgumentOutOfRangeException( "結(jié)束行號(hào)不得小于起始行號(hào)" ); } using (IDbConnection dbConnection = CreateConnection()) { var queryResult = dbConnection.Query<T>( "select top " + (endline - startline + 1) + " * from " + tableName + " where Id not in (select top " + (startline - 1) + " Id from " + tableName + " order by Id desc) order by Id desc" ); if (queryResult != null && queryResult.Any()) { return queryResult; } } return null ; } |
繪制分頁(yè)按鈕
在App_Code文件夾中添加PageHelper.cshtml文件封裝繪制按鈕的代碼,這里需要注意一點(diǎn),使用VS發(fā)布站點(diǎn)時(shí)App_Code文件夾中的文件不會(huì)被打包,需要手動(dòng)拷貝App_Code文件夾中的文件到站點(diǎn)中。
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
|
@* amount:數(shù)據(jù)總數(shù),count:每頁(yè)顯示的數(shù)據(jù)條數(shù),redierctUrl點(diǎn)擊按鈕時(shí)的跳轉(zhuǎn)鏈接 頁(yè)面上需引用:bootstrap.min.css *@ @helper CreatePaginateButton( int amount, int count, string redirectUrl) { <div id= "pagenumber" style= "position:fixed;bottom:-15px;text-align:center;width:84%" > <nav style= "text-align:center" > <ul class = "pagination" > <li><a href= "@redirectUrl/1" rel= "external nofollow" >首頁(yè)</a></li> @{ int pageNumber = ( int )Math.Ceiling(amount / (count * 1.0)); pageNumber = pageNumber < 1 ? 1 : pageNumber; //頁(yè)面上顯示的按鈕數(shù)目(不計(jì)首頁(yè)、末頁(yè)、上一頁(yè)、下一頁(yè)等按鈕),若頁(yè)面總數(shù)超過(guò)該值則繪制按鈕分隔符 const int BUTTON_COUNT = 7; // 按鈕分隔符 const string BUTTON_SEPARATOR = "......" ; //按鈕分隔符左側(cè)按鈕數(shù)目(不計(jì)首頁(yè)、末頁(yè)、上一頁(yè)、下一頁(yè)等按鈕) const int LEFT_BUTTON_COUNT = 4; //按鈕分隔符右側(cè)按鈕數(shù)目(不計(jì)首頁(yè)、末頁(yè)、上一頁(yè)、下一頁(yè)等按鈕) const int RIGHT_BUTTON_COUNT = 2; string [] urlSegments = Request.Url.Segments; int selectedIndex = 0; int .TryParse(urlSegments[urlSegments.Length - 1], out selectedIndex); int previous = (selectedIndex - 1) <= 0 ? 1 : selectedIndex - 1; int next = (selectedIndex + 1 > pageNumber) ? pageNumber : selectedIndex + 1; var r=Request.Cookies[ "" ]; if (pageNumber > BUTTON_COUNT) { <li><a id= "next" href= "@redirectUrl/@previous" rel= "external nofollow" >上一頁(yè)</a></li> for ( int i = 1; i <= BUTTON_COUNT; i++) { if ( selectedIndex >= LEFT_BUTTON_COUNT && selectedIndex%LEFT_BUTTON_COUNT==0 && i <= LEFT_BUTTON_COUNT) { <li><a name= "pageButton" id= "@selectedIndex" href= "@redirectUrl/@selectedIndex" rel= "external nofollow" >@selectedIndex</a></li> int step = selectedIndex; int tag = 0; for (i = 1; i <= LEFT_BUTTON_COUNT; i++) { tag = i + step; if (tag > pageNumber - RIGHT_BUTTON_COUNT) { if (i <= LEFT_BUTTON_COUNT) { i = LEFT_BUTTON_COUNT + 1; } break ; } <li><a name= "pageButton" id= "@tag" href= "@redirectUrl/@tag" rel= "external nofollow" rel= "external nofollow" >@tag</a></li> } } else if (i <= LEFT_BUTTON_COUNT && selectedIndex<LEFT_BUTTON_COUNT) { <li><a name= "pageButton" id= "@i" href= "@redirectUrl/@i" rel= "external nofollow" rel= "external nofollow" >@i</a></li> } else if (i < LEFT_BUTTON_COUNT && selectedIndex>LEFT_BUTTON_COUNT) { int step = selectedIndex / LEFT_BUTTON_COUNT; int tag = 0; <li><a name= "pageButton" id= "@(step*LEFT_BUTTON_COUNT)" href= "@redirectUrl/@(step*LEFT_BUTTON_COUNT)" rel= "external nofollow" >@(step*LEFT_BUTTON_COUNT)</a></li> for (i = 1; i <= LEFT_BUTTON_COUNT; i++) { tag = i + step * LEFT_BUTTON_COUNT; if (tag > pageNumber - RIGHT_BUTTON_COUNT) { if (i <= LEFT_BUTTON_COUNT) { i = LEFT_BUTTON_COUNT + 1; } break ; } <li><a name= "pageButton" id= "@tag" href= "@redirectUrl/@tag" rel= "external nofollow" rel= "external nofollow" >@tag</a></li> } } //繪制按鈕分隔符右側(cè)按鈕 if (i==BUTTON_COUNT-1) { <li><a name= "pageButton" id= "@(pageNumber-1)" href= "@redirectUrl/@(pageNumber-1)" rel= "external nofollow" >@(pageNumber-1)</a></li> } else if (i==BUTTON_COUNT) { <li><a name= "pageButton" id= "@pageNumber" href= "@redirectUrl/@pageNumber" rel= "external nofollow" rel= "external nofollow" >@pageNumber</a></li> } //繪制按鈕分隔符 else if (i >= BUTTON_COUNT -RIGHT_BUTTON_COUNT) { <li><span name= "pageButton" >@BUTTON_SEPARATOR</span></li> } } <li><a id= "next" href= "@redirectUrl/@next" rel= "external nofollow" >下一頁(yè)</a></li> } else { for ( int i = 1; i <= pageNumber; i++) { <li><a name= "pageButton" id= "@i" href= "@redirectUrl/@i" rel= "external nofollow" rel= "external nofollow" >@i</a></li> } } } <li><a href= "@redirectUrl/@pageNumber" rel= "external nofollow" rel= "external nofollow" >末頁(yè)</a></li> </ul> </nav> </div> <script> $(function () { //設(shè)置被選中按鈕的背景色 var selected = $( '#@selectedIndex' ); if (selected != undefined) { selected.css( 'background-color' , '#E1E1E1' ); } </script> } |
在前臺(tái)頁(yè)面中調(diào)用即可繪制分頁(yè)按鈕
1
|
@PageHelper.CreatePaginateButton(246, 10, "/usermanager/attentionlist/" ) |
下面是幾張分頁(yè)按鈕效果圖:
對(duì)應(yīng)的HTML代碼:
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持服務(wù)器之家。
原文鏈接:http://www.jianshu.com/p/c489949ee03f