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