標籤：
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>
table.appand(行資料) datagrid分頁
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
