Ext.grid.Panel表格分页_html

@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <title>Ext.grid.Panel动态加载分页数据</title>
    <link href="@Url.Content("~/Scripts/ext-4.0.7-gpl/resources/css/ext-all.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/ext-4.0.7-gpl/bootstrap.js")" type="text/javascript"></script>
    <script type="text/javascript">
        Ext.require([
            'Ext.grid.*',
            'Ext.toolbar.Paging',
            'Ext.data.*'
        ]);
        Ext.onReady(function () {
            Ext.define("Province", {
                extend: "Ext.data.Model",
                fields: [
                    { name: "ProvinceID" },
                    { name: "ProvinceNo" },
                    { name: "ProvinceName" }
                ]
            });

            var store = Ext.create("Ext.data.JsonStore", {
                pageSize: 10, // 分页大小
                model: "Province",
                proxy: {
                    type: "ajax",
                    url: "/Province/List",
                    reader: {
                        type: "json",
                        root:"root",
                        totalProperty: 'totalProperty'
                    }
                }
            });
            store.loadPage(1);

            Ext.create("Ext.grid.Panel", {
                title: "Ext.grid.Panel",
                renderTo: Ext.getBody(),
                frame: true,
                height: 310,
                width: 400,
                store: store,
                columns: [
                    { header: "ID", width: 50, dataIndex: "ProvinceID", sortable: true },
                    { header: "编号", width: 100, dataIndex: "ProvinceNo", sortable: true },
                    { header: "名称", width: 135, dataIndex: "ProvinceName", sortable: true }
                ],
                bbar: Ext.create('Ext.PagingToolbar', {
                    store: store,
                    displayInfo: true,
                    displayMsg: '显示{0}-{1}条，共{2}条',
                    emptyMsg: "没有数据"
                })
            });
        });
    </script>
</head>
<body>
</body>
</html>


Ext.grid.Panel表格分页_html


controller



Ext.grid.Panel表格分页_html

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

using Northwind.Domain.Entities;
using Northwind.Data;
using Northwind.Service;

namespace Northwind.Web.Controllers
{
    public class ProvinceController : Controller
    {
        private IProvinceService provinceService;

        public ProvinceController(IProvinceService provinceService)
        {
            this.provinceService = provinceService;
        }

        public ActionResult Grid()
        {
            return View();
        }

        /// <summary>
        /// 省份分页数据
        /// </summary>
        /// <param name="page">当前页</param>
        /// <param name="limit">分页大小</param>
        /// <returns></returns>
        public JsonResult List(int page, int limit)
        {
            int totalRecords;
            return Json(new { root = provinceService.GetPaged(page, limit, out totalRecords), totalProperty = totalRecords }, JsonRequestBehavior.AllowGet);
        }
    }
}


Ext.grid.Panel表格分页_html


效果图：

Ext.grid.Panel表格分页_html_05