Asp.Net Mvc4+jquery分頁備忘

Jquery提供了一個分頁JS：jquery.pagination.js  可以通過異步請求服務端在客戶端無刷新分頁，效果如下：

實現步驟：

1. 新建MVC項目引入資源：

 

        <link href="../../Content/pagination.css" rel="stylesheet" type="text/css" />
        <script src="../../Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
        <script src="../../Scripts/jquery.pagination.js" type="text/javascript"></script>

 2. 視圖中加入初始化代碼：

 

<script type="text/javascript">
    var pageSize = 10; //每頁顯示多少條信息
    $(function () {
        // 創建分頁
        $("#Pagination").pagination(25, {
                num_edge_entries: 1, //邊緣頁數
                num_display_entries: 10, //主體頁數
                callback: paginationCallback, //回調函數
                items_per_page: pageSize, //每頁顯示多少項
                prev_text: "前一頁",
                next_text: "后一頁"
            });
     });
   function paginationCallback(page_index, jq) {
       $.post("/home/GetPageList", { "PageIndex": page_index, "pageSize": pageSize }, function (result) {
           var str = "";
           //result=eval("("+result+")");
           $.each(result, function (index,item) {
               str += "<tr><td>" + item.Id + "</td><td>" + item.Name + "</td></tr>";
           });
           $("#List tr:gt(0)").remove();
           $("#List").append(str);
       })
    }
</script>
<table width="1000" border="0" cellspacing="0" id="List">
  <tr class="ListTitle"><td>ID</td><td>名稱</td></tr>
</table>
<div id="Pagination" class="quotes"></div>

 3. 控制器中加入測試數據產生Action:

 public ActionResult GetPageList(int pageSize, int pageIndex)
        {
            List<Person> list = new List<Person>();
            for (int i = 0; i < 25; i++)
            {
                Person p = new Person { Id = i + 1, Name = "zhangsan" + i };
                list.Add(p);
            }
            return Json(list.Skip(pageIndex*pageSize).Take(pageSize),JsonRequestBehavior.AllowGet);
        }

 Person類如下：

    public class Person
    {
        /// <summary>
        /// 編號
        /// </summary>
        public int Id { get; set; }

        /// <summary>
        /// 名字
        /// </summary>
        public string Name { get; set; }
    }

然后F5，不出意外的話會告訴你某個函數找不到，那么去_LayOut中找到：

        @Scripts.Render("~/bundles/jquery")
        @RenderSection("scripts", required: false)

 刪掉即可。

或者也可以采用MVC4推薦的壓縮方式去引用。

分頁標簽的樣式這里有位仁兄的比較全，有多種風格可選：

http://www.cnblogs.com/knowledgesea/archive/2013/01/03/2841554.html