转载：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. orcad中的PSpice仿真加入厂商模型

      <1>首先要知道原理图的符号是没有模型的,不是你肆意妄为就可以拉来仿真的. <2>其次要知道很多器件软件中是没有模型的. <3>有很多获取模型的方法:<使 ...

  2. jQuery Asynchronous

    http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_deferred_object.html http:// ...

  3. AltiumDesigner导入AutoCAD文件DXF,DWG格式

    最近有个朋友给了个AutoCAD的文件,需要我画个板子,结构什么的参见AutoCAD的文件,百度了下,得知protel是可以导入AutoCAD的DXF,DWG格式的文件的,那么AltiumDesign ...

  4. [置顶] 技术人血泪史：七种IT失误让你直接走人

    IT人士的真实故事:搞出大麻烦,旋即遭解雇 如今想找一份理想的IT工作并不容易,但丢掉一份工作却非常简单. 导致自己被炒鱿鱼的原因很多,无论是没能尽到保护雇主数字资产的义务.或者是滥用手中的权限以达到 ...

  5. SQL约束和字段约束的创建和删除

    1)禁止所有表约束的SQLselect 'alter table '+name+' nocheck constraint all' from sysobjects where type='U' 2)删 ...

  6. HDU Collect More Jewels 1044

    BFS + 状态压缩 险过 这个并不是最好的算法 但是写起来比较简单 , 可以AC,但是耗时比较多 下面是代码 就不多说了 #include <cstdio> #include <c ...

  7. CodeForces 689C　　Mike and Chocolate Thieves

    题目链接:http://acm.hust.edu.cn/vjudge/problem/visitOriginUrl.action?id=412145 题目大意:给定一个数字n,问能不能求得一个最小的整 ...

  8. iOS 用CocoaPods做iOS程序的依赖管理

    文档更新说明 2012-12-02 v1.0 初稿 2014-01-08 v1.1 增加设置 ruby 淘宝源相关内容 2014-05-25 v2.0 增加国内 spec 镜像.使用私有 pod.po ...

  9. openssl生成RSA格式，并转为pkcs8格式

    原文地址:http://www.thinkingquest.net/articles/391.html?utm_source=tuicool 支付宝接口开发相关:openssl 加密工具 支付宝“手机 ...

  10. shell timeout

    写脚本的时候,经常需要用到超时控制.看<shell专家编程>时看到一个好例:修改了一下, 1.超过timeout时间还没执行完,则kill进程,发邮件告警: set-xmailSend() ...