转载：http://www.cnblogs.com/libingql/archive/2012/04/22/2464994.html

cshtml

@{

    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>

controller

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表格分页的更多相关文章

  1. Ext.grid.Panel表格分页存储过程

    /*首先需要引入两个Extjs插件类 Ext.ux.data.PagingMemoryProxy和Ext.ux.ProgressBarPager这两个类*/ /*下面是控制弹出窗体放大缩小时窗体居中的 ...

  2. ExtJs 学习之开篇（三）Ext.grid.Panel表格中的处理

    Ext.grid.Panel Ext.create('Ext.grid.Panel',{        title:'测试表格',        width:400,        height:20 ...

  3. 【extjs】 ext5 Ext.grid.Panel 分页,搜索

    带有分页,搜索的grid. <%@page language="java" contentType="text/html; charset=UTF-8" ...

  4. [Extjs] Ext4 Ext.grid.Panel 分页实现（mybatis 分页插件-PageHelper 使用）

    先看图: 页面js代码: var userStore=Ext.create('Ext.data.Store', { storeId:'userStore', fields:['uname', 'ema ...

  5. 完善ext.grid.panel中的查询功能(紧接上一篇)

    今天的代码主要是实现,Ext.grid.panel中的查询,其实我也是一名extjs新手,开始想的实现方式是另外再创建一个新的grid类来存放查询出的数据(就是有几个分类查询就创建几个grid类),这 ...

  6. 【extjs】 extjs5 Ext.grid.Panel 搜索示例

    先看效果图: 页面js: <script type="text/javascript"> /** * 日志类型 store * */ var logTypeStore ...

  7. Ext.grid.Panel 数据动态改变后刷新grid

    gridPanel中加载的数据分为两种:一种是本地数据加载,那另一种就是后台数据加载. 在表格中增.删.改.查 是必不可少的. 那么数据动态改变后怎样刷新表格中的数据呢. 一.后台取数据 var gr ...

  8. 导出Ext.grid.Panel到excel

    1.客户端定义,基本的想法是form提交表格头定义,数据,以json方式传输 Ext.grid.Panel.addMembers({ exportExcel:function(options){ if ...

  9. ext grid 子表格

    Ext.define('app.view.main.biz.customer.receipt.followup.FollowUpActionPanel', { extend: 'Ext.grid.Pa ...

随机推荐

  1. C#后台找不到前台html标签

    没关系!   只要他在form表单里  , 咱在标签加上一个   runat="server"就可以在后台cs代码里找到他了

  2. bbc 大数据

    http://video.sina.com.cn/v/b/107900125-2192582404.html

  3. couchdb and redis

    http://www.jdon.com/artichect/scalable5.html http://www.dedecms.com/knowledge/data-base/nosql/2012/0 ...

  4. 在InnoDB,记录在 non-clustered indexes(也被称为secondary indexes) 包含了主键值

    In InnoDB, the records in non-clustered indexes (also called secondary indexes) contain the primary ...

  5. 线程调用UpdateData函数出错

    在尝试线程更新界面时,在线程中调用UpdateData(FALSE)后出现如下错误: 原因: MFC对象不支持多线程操作,不能供多个线程进程使用.子线程调用pDlg-> UpdateData(F ...

  6. 数据结构（主席树,Bit）：XTU 1247/COGS 2344. pair-pair

    pair-pair 输入文件:pair-pair.in   输出文件:pair-pair.out   简单对比 时间限制:7 s   内存限制:64 MB Time Limit : 7000 MS M ...

  7. wp8模拟器中使用电脑键盘和模拟器的版本解释

    一:如图启用和关闭 二:电脑按键对应的手机的按键 三:模拟器的版本解释

  8. RAII(Resource Acquisition Is Initialization)资源获得式初始化

    当在编写代码中用到异常,非常重要的一点是:“如果异常发生,程序占用的资源都被正确地清理了吗?” 大多数情况下不用担心,但是在构造函数里有一个特殊的问题:如果一个对象的构造函数在执行过程中抛出异常,那么 ...

  9. Jenkins 十二： 集成 selenium 测试

    我的selenium采用的是python版本. 其实 selenium java版本也类似. 1. 在jenkins里面新建selenium 测试项目. 源码管理采用 “Subversion”,输入 ...

  10. 金牌分析师助力 鲁泰A图谋再造一个“鲁泰”？_财经_中国网

    金牌分析师助力 鲁泰A图谋再造一个"鲁泰"?_财经_中国网 金牌分析师助力 鲁泰A图谋再造一个"鲁泰"?