.net MVC 中提供了一個分頁組件“MvcPager”，用起來還算方便，實用性較強。
簡單寫一下使用方法，如有不足的地方，請各位大大給小弟指正出來。
一、准備工作
使用這個組件需要 MvcPager.dll 與 MvcPager.js
下載地址：http://pan.baidu.com/s/1jI5BpKa
二、代碼
1、項目引用MvcPager.dll
2、在頁面分頁顯示，首先需要一些數據，這里創建了一個實體 LoginModel 包含用戶名、密碼兩個屬性，代碼如下：
using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace WebTest.Models { public class LoginModel { /// <summary> /// 用戶名 /// </summary> public string UserName { get; set; } /// <summary> /// 密碼 /// </summary> public string Pwd { get; set; } } }
3、控制器中寫一個返回實體列表（列表為“PagedList”）的方法，代碼如下：
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using Webdiyer.WebControls.Mvc; using WebTest.Models; namespace WebTest.Controllers { public class LoginController : Controller { /// <summary> /// 實體列表 /// </summary> /// <returns></returns> public ActionResult PageTest(int pageIndex = 1) { int totalCount = 200; int pageSize = 10; List<LoginModel> userList = new List<LoginModel>(); for (int i = 1; i <= totalCount; i++) { LoginModel model = new LoginModel(); model.UserName = "用戶" + i; model.Pwd = i.ToString(); userList.Add(model); } PagedList<LoginModel> pList = userList.ToPagedList(pageIndex, pageSize); pList.PageSize = pageSize; pList.TotalItemCount = totalCount; pList.CurrentPageIndex = pageIndex; return View(pList); } } }
4、如果需要 使用跳轉按鈕功能 則頁面要添加 MvcPager.js，如果不需要則不用添加了。 視圖代碼如下：
@using WebTest.Models; @using Webdiyer.WebControls.Mvc; @model PagedList<LoginModel> @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>PageTest</title> <style type="text/css"> /*分頁容器 主體樣式*/ .pager { padding:10px; } /*可用的按鈕*/ .able { margin: 0 2px; padding: 3px 10px; border: 1px solid #ddd; background-color: #fff; color: #777; cursor: default; } /*不可用的按鈕*/ .disable { margin: 0 2px; padding: 3px 10px; border: 1px solid #ddd; background-color: #fff; color: #777; cursor:default; } /*當前按鈕*/ .current { margin: 0 2px; padding: 3px 10px; border: 1px solid #337ab7; background-color: #337ab7; color: #fff; cursor: default; } </style> </head> <body> <div style="padding:10px;"> @foreach(var item in Model) { <table> <tr> <td style="width:130px;"> 名稱： @item.UserName </td> <td> 密碼： @item.Pwd </td> </tr> </table> } </div> @Html.Pager(Model, new PagerOptions { Id = "pager", PageIndexParameterName = "pageIndex",//控制器參數 ContainerTagName = "span",//分頁容器形式（默認好像是div） CssClass = "pager",//容器css class ShowMorePagerItems = false,//“更多”按鈕不顯示 CurrentPagerItemTemplate = "<span class=\"current\">{0}</span>",//當前按鈕 模版 DisabledPagerItemTemplate = "<span class=\"disable\">{0}</span>",//不可用按鈕 模版 PagerItemTemplate = "<span class=\"able\">{0}</span>",//可用按鈕 模版 FirstPageText = "首頁", PrevPageText = "上一頁", NextPageText = "下一頁", LastPageText = "末頁", PageIndexBoxId = "pagebox", GoToButtonId = "goBtn" } ) <input type="text" id="pagebox" /> <button id="goBtn">跳轉</button> <script src="~/Scripts/jquery-1.10.2.min.js"></script> <script src="~/Scripts/MvcPager.min.js"></script> <script type="text/javascript"> $(function () { $("#goBtn").click(function () { var pager = Webdiyer.MvcPagers.getById("pager"); if (pager != null) { pager.goToPage($("#pagebox").val()); } }); }); </script> </body> </html>
PagerOptions 有一些屬性（自行百度，都能看明白），代碼里我只寫了幾個常用的
下面的幾個都是分頁組件的模版(分頁按鈕本身都是a標簽，加上模版就是在a標簽外面套上模版，下面的幾個就是 a標簽外面套了一個樣式分別為current、disableable的span標簽 這樣能讓分頁組件變得好看一些^_^)
CurrentPagerItemTemplate = "<span class=\"current\">{0}</span>",//當前按鈕 模版
DisabledPagerItemTemplate = "<span class=\"disable\">{0}</span>",//不可用按鈕 模版（比如當前頁為第一頁時，“上一頁”、“首頁” 這兩個按鈕就是“不可用按鈕”）
PagerItemTemplate = "<span class=\"able\">{0}</span>",//可用按鈕 模版
如果要加上跳轉按鈕功能，則需要在頁面引用jquery與MvcPager.js，
PageIndexBoxId = "pagebox", //指向文本框
GoToButtonId = "goBtn"//指向按鈕
並加入 上面代碼中的js就可以啦。
5、運行后如下圖：
試了下 可以順利切換。^_^