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>
