每次寫分頁導航的時候都要在html頁面寫一堆標簽和樣式,太麻煩了,所以乾脆自己動手封裝一個自己喜歡的類直接生成。 一、PageHelper類: /// <summary> /// 分頁導航 /// </summary> /// <param name="pageNum">當前第幾頁</param>
每次寫分頁導航的時候都要在html頁面寫一堆標簽和樣式,太麻煩了,所以乾脆自己動手封裝一個自己喜歡的類直接生成。
一、PageHelper類:
/// <summary> /// 分頁導航 /// </summary> /// <param name="pageNum">當前第幾頁</param> /// <param name="pageNumSum">總頁數</param> /// <param name="url">顯示的url</param> /// <param name="p">分頁參數名</param> /// <param name="linCount">顯示多少頁</param> /// <returns></returns> public static string page(int pageNum, int pageNumSum, string url, string p, int linCount) { if (pageNum < 1) pageNum = 1; if (pageNum > pageNumSum) pageNum = pageNumSum; // a的樣式 string aStyle = "text-decoration:none;border:1px solid #075DB3;box-sizing:border-box;margin:0 2px;padding:2px 5px;font-size:12px;"; StringBuilder sb = new StringBuilder(); sb.AppendLine(string.Format("<div style='text-align:center;margin-bottom:30px;'>第<span style='color:#00ff21'>{0}</span>/{1} 頁", pageNum, pageNumSum)); sb.AppendLine(string.Format(" <a style='{0}' href='{1}?{2}={3}'>上一頁</a>", aStyle, url, p, pageNum - 1 < 1 ? 1 : pageNum - 1)); //設開始頁為1 int beginPage = 1; //中間頁為 linCount/2 int midPage = linCount / 2; if (pageNum > midPage) { beginPage = pageNum - midPage; } for (int i = 0; i < linCount; i++) { //當前頁不加鏈接 if (pageNum == beginPage + i) { sb.AppendLine(string.Format("<span style='display: inline-block;width:10px;'></span>{0}<span style='display: inline-block;width:10px;'></span>", beginPage + i)); } else { sb.AppendLine(string.Format("<a style='{0}' href='{1}?{2}={3}'>{3}</a>", aStyle, url, p, beginPage + i)); } //如果後面的頁數大於總頁數,退出迴圈 if (beginPage + i >= pageNumSum) { break; } } sb.AppendLine(string.Format(" <a style='{0}' href='{1}?{2}={3}'>下一頁</a>", aStyle, url, p, pageNum + 1 >= pageNumSum ? pageNumSum : pageNum + 1)); sb.Append("</div>"); return sb.ToString(); }
二、演示
這是在一個mvc項目中做的演示
action :
public ActionResult Index(string page) { //1.獲得當前頁數 int pageNum = 1;//預設第一頁 if(page!=null) pageNum = Convert.ToInt32(page); //一些判斷是否為int或者是否<0大於最大頁數這裡不做判斷,主要演示分頁效果 //2.總頁數-- 查詢資料庫得到總條數再計算得到總頁數 int pageNumSum = 18;//假設計算得到結果為18頁 string url = "/Demo/Index"; //當前url //要顯示多少頁 int pageList = 5;//假設看到5頁 //mvc要 MvcHtmlString 進行生成html碼,不然會是一個字元串 ViewBag.page = new MvcHtmlString(PageHelper.page(pageNum, pageNumSum, url, "page", pageList)); return View(); }
view:
<html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <style type="text/css"> p { text-align:center; color:#00ff21; } </style> </head> <body> <p>列表內容</p> <p>列表內容</p> <p>列表內容</p> <p>列表內容</p> <p>列表內容</p> <div> @ViewBag.page </div> </body> </html>
效果:
後言:當然這主要是說一個方法,如果覺得這個不好看,你可以自己寫多幾個自己喜歡的分頁效果類,想用哪個就調用哪個的。