ASP.NET MVC4 + EF5 + EasyUI + Unity2.x 後台管理系統實戰（八）：DataGrid 分頁實作詳解

前言

上一講介紹了 EasyUI DataGrid 的基本資料綁定，本講將深入說明如何啟用並配置 DataGrid 的分頁功能，包含前端參數傳遞、後端分頁邏輯處理以及回傳 JSON 格式規範。

DataGrid 分頁屬性配置

要啟用分頁，需在 DataGrid 初始化時設定下列屬性：

• pagination：是否啟用分頁（預設 false）
• pageSize：每頁筆數（預設 10）
• pageList：可切換的每頁筆數選項（預設 [10,20,30,40,50]）
• sortName：預設排序欄位
• sortOrder：排序方式（asc/desc）

完整前端代碼範例

$(function () {
  $('#List').datagrid({
    url: '/SysSample/GetList',
    width: $(window).width() - 10,
    method: 'post',
    height: $(window).height() - 35,
    fitColumns: true,
    sortName: 'Id',
    sortOrder: 'desc',
    idField: 'Id',
    pageSize: 15,
    pageList: [15, 20, 30, 40, 50],
    pagination: true,
    striped: true,
    singleSelect: true,
    rownumbers: true,
    columns: [[
      { field: 'Id', title: 'ID', width: 80 },
      { field: 'Name', title: '名稱', width: 120 },
      { field: 'Age', title: '年齡', width: 80, align: 'right' },
      { field: 'Bir', title: '生日', width: 80, align: 'right' },
      { field: 'Photo', title: '照片', width: 250 },
      { field: 'Note', title: '說明', width: 60, align: 'center' },
      { field: 'CreateTime', title: '創建時間', width: 60, align: 'center' }
    ]]
  });
});

後端分頁邏輯說明

DataGrid 會自動傳遞 page（當前頁碼）與 rows（每頁筆數）參數至後端。Controller 接收後交由 BLL 層處理分頁邏輯，回傳包含 total（總筆數）與 rows（當前頁資料陣列）的 JSON 物件，格式如下：

{
  "total": 100,
  "rows": [
    { "Id": 1, "Name": "項目一", ... },
    { "Id": 2, "Name": "項目二", ... }
  ]
}

效能觀察

實測發現 EasyUI DataGrid 在處理大量資料時，渲染速度優於傳統 JQGrid 控件，適合作為本系統的核心表格元件。