转载：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. Application路径

    根目录:StreamingAssets文件夹 #if UNITY_EDITOR string filepath = Application.dataPath +"/StreamingAsse ...

  2. BZOJ 1492 货币兑换

    Description Input 第一行两个正整数\(N,S\),分别表示小Y 能预知的天数以及初始时拥有的钱数. 接下来\(N\)行,第\(K\)行三个实数\(A_{K},B_{K},Rate_{ ...

  3. Unity3d ngui基础教程

    Unity3d ngui基础教程 NGUI教程:步骤1-Scene 1.创建一个新的场景(New Scene).2.选择并删除场景里的MainCamera.3.在NGUI菜单下选择Create a N ...

  4. java学习面向对象之封装

    在以往几节当中我们讲到了什么是类,类就是对一类事物的描述,比如现在我们有一个人类 class Person { /** *这里我们分别在name和age上加上了元素的访问权限 *这里的private是 ...

  5. 算法学习之C语言基础

    算法学习,先熟悉一下C语言哈!!! #include <conio.h> #include<stdio.h> int main(){ printf(+); getch(); ; ...

  6. asp.net 由于代码已经过优化或者本机框架位于调用堆栈之上，无法计算表达式的值

    看MS给的解决方案:(http://support.microsoft.com/kb/312629/ ) 症状:如果使用 Response.End.Response.Redirect 或 Server ...

  7. 使用eclipse搭建嵌入式开发环境

    下载jdk http://download.oracle.com/otn-pub/java/jdk/7u4-b20/jdk-7u4-linux-i586.tar.gz 下载eclipse-cpp-ga ...

  8. 课后习题 SPJ

    CREATE TABLE S ( SNO char(2) primary key, SNAME varchar(20), STATUS char(4), CITY char(10) ); create ...

  9. Gridview导出到Excel

    #region #导出到Excel     protected void Button2_Click(object sender, EventArgs e)     {         Respons ...

  10. SQLServer2005 常用语法大全

    SQL分类: DDL—数据定义语言(CREATE,ALTER,DROP,DECLARE) DML—数据操纵语言(SELECT,DELETE,UPDATE,INSERT) DCL—数据控制语言(GRAN ...