转载：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. Solr4.8.0源码分析(21)之SolrCloud的Recovery策略(二)

    Solr4.8.0源码分析(21)之SolrCloud的Recovery策略(二) 题记:  前文<Solr4.8.0源码分析(20)之SolrCloud的Recovery策略(一)>中提 ...

  2. [待续]Async in C# 1

    异步.异步是在.net .45里面提供的一个新的方法 它主要用在.三个方面 1.网络访问 2.磁盘访问 3.延迟很长时间的步骤 它主要有2个关键字 Async  Await Async  怎么工作 d ...

  3. js 返回前一页并刷新页面方法

    [导读] 要返回上一页再刷新页面我们用到最多的是在像php,asp,jsp,asp.net中,下面我来给大家先介绍js 返回前一页并刷新页面,然后再把这些代码放在php中实现删除后返回当前页面并刷新页 ...

  4. STM8S 模拟I2C程序

    STM8S的硬件I2C还是存在问题,不敢贸然使用. 于是决定用模拟I2C. #define SCL PE_ODR_ODR1 #define SDA PE_ODR_ODR2 #define SDAM P ...

  5. Apache CXF多个远程拒绝服务漏洞(CVE-2013-2160)

    漏洞版本: Apache Group CXF <= 2.5.10 Apache Group CXF 2.7.4 Apache Group CXF 2.6.7 漏洞描述: BUGTRAQ ID: ...

  6. awk合并文件一例

    群里的朋友求助: $ cat file1a 1 2 3b 2 3 4c 3 4 5 $ cat file2d 你b 好c 吗 合并两个文件,需要实现: a 1 2 3b 2 3 4 好c 3 4 5 ...

  7. 【转】JAVA程序中Float和Double精度丢失问题

    原文网址:http://blog.sina.com.cn/s/blog_827d041701017ctm.html 问题提出:12.0f-11.9f=0.10000038,"减不尽" ...

  8. 动态规划(背包问题)：POJ 1742 Coins

    Coins Time Limit: 3000MS   Memory Limit: 30000K Total Submissions: 32955   Accepted: 11199 Descripti ...

  9. 【最大流】ECNA 2015 F Transportation Delegation (Codeforces GYM 100825)

    题目链接: http://codeforces.com/gym/100825 题目大意: N(N<=600)个点,每个点有个名字Si,R(R<=200)个生产商在R个点上,F(F<= ...

  10. C#里4个访问权限修饰符

    C#里类及类成员的修饰符有以下五个如下:public 公开 类及类成员的修饰符 对访问成员没有级别限制private 私有 类成员的修饰符 只能在类的内部访问protected 受保护的 类成员的修饰 ...