using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using Mvc5.Models; namespace Mvc5.Controllers { public class HomeController : Controller { BookShopPlusEntities db = new BookShopPlusEntities(); public ActionResult Index() { //控制器在启动index方法时，视图还没加载,Request.Params["page"]的值是空的 if (Request.Params["page"]==null) { return View(); } else { //获取客户端的请求参数：page是第几页 int pid = Convert.ToInt16(Request.Params["page"]); //获取客户端的请求参数：size是每页几条数据 int size = Convert.ToInt16(Request.Params["rows"]); int count = db.Books.Count();//总行数 //获取分页数据 List<Books> list = db.Books.OrderBy(b=>b.Id).Skip((pid - 1) * size).Take(size).ToList(); //把集合转换转换成匿名类对象 var result = from b in list select new { Title = b.Title, Id = b.Id }; //发送json数据到客户端，如果视图页面用到easyui的表格，必须用total和rows属性名 return Json(new { total = count, rows = result }, JsonRequestBehavior.AllowGet); } } } }
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <link href="~/easyui/themes/icon.css" rel="stylesheet" /> <link href="~/easyui/themes/default/easyui.css" rel="stylesheet" /> <script src="~/easyui/jquery.min.js"></script> <script src="~/easyui/jquery.easyui.min.js"></script> <script src="~/easyui/locale/easyui-lang-zh_CN.js"></script> <script> /* $(function () { $("#tab").datagrid({ url: "/Home/Index", columns: [[ { field: 'Title', title: '标题' } ]], singleSelect: true, pagination: true, pageSize: 10, //设置分页时初始化条数选择大小 pageList: [5, 10, 15], //设置分页时初始化页码 pageNumber: 1, //设置分页工具栏的位置 pagePosition: "bottom" }); }); */ $(function () { query(1,10); }); function query(pid,size) { $.get("/Home/Index", { page: pid, rows: size }, function (result) { $("#tab").empty(); $.each(result.rows, function (i, mod) { var tr = "<tr><td>" + mod.Title + "</td></tr>"; $("#tab").append(tr); }); $('#pager').pagination({ total: result.total,//总行数 pageSize: size, pageNumber: pid, onSelectPage: function (pagenum, pagesize) { query(pagenum, pagesize); }, onChangePageSize: function (pagenum, pagesize) { query(pagenum, pagesize); } }); }, "json"); } </script> </head> <body> <table id="tab"></table> <div id="pager" style="background-color:aquamarine"></div> </body> </html>