ASP.NET MVC5 實現分頁查詢
阿新 • • 發佈：2019-01-04
對於大量資料的查詢和展示使用分頁是一種不錯的選擇，這篇文章簡要介紹下自己實現分頁查詢的思路。
分頁需要三個變數：資料總量、每頁顯示的資料條數、當前頁碼。
//資料總量 int dataCount; //每頁顯示的資料條數 int pageDataCount; int pageNumber;
根據資料總量和每頁顯示的資料條數計算出總頁數，根據當前頁碼和每頁顯示的資料條數計算出從資料庫中讀取資料的起始行號和結束行號。
//總頁數 int pageCount = (int)Math.Ceiling(dataCount/ (pageDataCount* 1.0)); int startLine = (pageNumber - 1) * PageDataCount + 1; int endLine=startLine + PageDataCount - 1;
對於資料庫的查詢操作使用輕量級ORM框架Dapper來實現，具體程式碼如下：
protected IDbConnection CreateConnection() { IDbConnection dbConnection = new SqlConnection(ConnectionString); dbConnection.Open(); return dbConnection; } //獲取資料庫中資料的總條數 public virtualView Codeint 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("起始行號必須大於0"); } if (endline - startline < 0) { throw new ArgumentOutOfRangeException("結束行號不得小於起始行號"); } 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; }
繪製分頁按鈕
在App_Code資料夾中新增PageHelper.cshtml檔案封裝繪製按鈕的程式碼，這裡需要注意一點，使用VS釋出站點時App_Code資料夾中的檔案不會被打包，需要手動拷貝App_Code資料夾中的檔案到站點中。
@* amount：資料總數，count：每頁顯示的資料條數，redierctUrl點選按鈕時的跳轉連結 頁面上需引用：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">首頁</a></li> @{ int pageNumber = (int)Math.Ceiling(amount / (count * 1.0)); pageNumber = pageNumber < 1 ? 1 : pageNumber; //頁面上顯示的按鈕數目（不計首頁、末頁、上一頁、下一頁等按鈕），若頁面總數超過該值則繪製按鈕分隔符 const int BUTTON_COUNT = 7; // 按鈕分隔符 const string BUTTON_SEPARATOR = "......"; //按鈕分隔符左側按鈕數目（不計首頁、末頁、上一頁、下一頁等按鈕） const int LEFT_BUTTON_COUNT = 4; //按鈕分隔符右側按鈕數目（不計首頁、末頁、上一頁、下一頁等按鈕） 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">上一頁</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">@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">@tag</a></li> } } else if (i <= LEFT_BUTTON_COUNT && selectedIndex<LEFT_BUTTON_COUNT) { <li><a name="pageButton" id="@i" href="@redirectUrl/@i">@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)">@(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">@tag</a></li> } } //繪製按鈕分隔符右側按鈕 if (i==BUTTON_COUNT-1) { <li><a name="pageButton" id="@(pageNumber-1)" href="@redirectUrl/@(pageNumber-1)">@(pageNumber-1)</a></li> } else if(i==BUTTON_COUNT) { <li><a name="pageButton" id="@pageNumber" href="@redirectUrl/@pageNumber">@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">下一頁</a></li> } else { for (int i = 1; i <= pageNumber; i++) { <li><a name="pageButton" id="@i" href="@redirectUrl/@i">@i</a></li> } } } <li><a href="@redirectUrl/@pageNumber">末頁</a></li> </ul> </nav> </div> <script> $(function () { //設定被選中按鈕的背景色 var selected = $('#@selectedIndex'); if (selected != undefined) { selected.css('background-color', '#E1E1E1'); } </script> }View Code
在前臺頁面中呼叫即可繪製分頁按鈕
@PageHelper.CreatePaginateButton(246, 10, "/usermanager/attentionlist/")
下面是幾張分頁按鈕效果圖：
對應的HTML程式碼：
以上是自己對於實現分頁的思路，繪製分頁按鈕的方法過長，不是一個好的方案，若各位讀者有更好的解決方案還望告知。文章最後推薦一個簡單易用的分頁元件X.PagedList。
本文為作者原創，版權歸作者雪飛鴻所有。 轉載必須保留文章的完整性，且在頁面明顯位置處標明原文連結。
如有問題， 請傳送郵件和作者聯絡。