1、SqlServer數據庫分頁查詢語句 如下：
（對於不同的數據庫請參照我的 數據庫分頁查詢文章）
--pageSize 每頁顯示的數量 --pageIndex 起始索引 select top pageSize * rom (select row_number() over(order by ID asc) as rownumber,* from student) temp_row where rownumber>((pageIndex-1)*pageSize);
css3分頁樣式
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> <style type="text/css"> /*設置div樣式的整體布局*/ .page-icon{ margin:20px 0 0 0;/*設置距離頂部20像素*/ font-size:0;/*修復行內元素之間空隙間隔*/ text-align:center;/*設置內容居中顯示*/ } /*設置共有的的樣式布局，主要是進行代碼優化，提高運行效率*/ .page-icon a,.page-disabled,.page-next{ border:1px solid #ccc; border-radius:3px; padding:4px 10px 5px; font-size:14PX;/*修復行內元素之間空隙間隔*/ margin-right:10px; } /*對 a 標簽進行樣式布局 */ .page-icon a{ text-decoration:none;/*取消鏈接的下划線*/ color:#005aa0; } .page-current{ color:#ff6600; padding:4px 10px 5px; font-size:14PX;/*修復行內元素之間空隙間隔*/ } .page-disabled{ color:#ccc; } .page-next i,.page-disabled i{ cursor:pointer;/*設置鼠標經過時的顯示狀態，這里設置的是顯示狀態為小手狀態*/ display:inline-block;/*設置顯示的方式為行內塊元素*/ width:5px; height:9px; background-image:url(http://img.mukewang.com/547fdbc60001bab900880700.gif);/*獲取圖標的背景鏈接*/ } .page-disabled i{ background-position:-80px -608px; margin-right:3px; } .page-next i{ background-position:-62px -608px; margin-left:3px; } </style> </head> <body> <div class="page-icon"> <span class="page-disabled"><i></i>上一頁</span> <span class="page-current">1</span> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">5</a> <a href="#">6</a> <a href="#">7</a> …… <a href="#">199</a> <a href="#">200</a> <a class="page-next" href="#">下一頁<i></i></a> </div> </body> </html>
效果圖如下：
對於控制層進行如下部署
public ActionResult Index() { int pageIndex; if (!int.TryParse(Request["pageIndex"],out pageIndex)) { pageIndex= 1; } //每頁顯示數據 int pageSize = 5; //統計總記錄 int recordCount = db.Student.Where<Student>(s=>true).Count(); //總的頁數 int pageCount = Convert.ToInt32(Math.Ceiling((double)recordCount / pageSize)); pageIndex = pageIndex < 1 ? 1 : pageIndex; pageIndex = pageIndex > pageCount ? pageCount : pageIndex; ///SQL語句操作部分自行添加 ViewData["stuList"] = stuList;//sb.ToString(); ViewData["pageIndex"] = pageIndex; ViewData["pageCount"] = pageCount; return View(); }
在前台部分通過paperHelper.cs進行調用
<div class="page-icon" style="text-align:center;margin-top:20px;"> @Html.Raw(@PageBarHelper.GetPagaBar((int)@ViewData["pageIndex"], (int)@ViewData["pageCount"])) </div>
paperHelper. cs
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; namespace MVCDemo { public class PageBarHelper { public static string GetPagaBar(int pageIndex, int pageCount) { if (pageCount == 1) { return string.Empty; } int start = pageIndex - 5;//計算起始位置.要求頁面上顯示10個數字頁碼. if (start < 1) { start = 1; } int end = start + 9;//計算終止位置. if (end > pageCount) { end = pageCount; //重新計算一下Start值. start = end - 9 < 1 ? 1 : end - 9; } StringBuilder sb = new StringBuilder(); if (pageIndex > 1) { //sb.AppendFormat("<a href='?pageIndex={0}' class='myPageBar'>上一頁</a>", pageIndex - 1); sb.AppendFormat("<a href='?pageIndex={0}' class='page-disabled'>上一頁</a>", pageIndex - 1); } for (int i = start; i <= end; i++) { if (i == pageIndex) { sb.Append(i); } else { sb.AppendFormat("<a href='?pageIndex={0}' class='page-current'>{0}</a>", i); } } if (pageIndex < pageCount) { sb.AppendFormat("<a href='?pageIndex={0}' class='page-next'>下一頁</a>", pageIndex + 1); } return sb.ToString(); } } }