转载：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. linux中用户信息及密码相关知识

    在linux中若修改用户信息.密码,组群信息.密码等.其实是在修改/etc/passwd,/etc/shadow,/etc/group,/etc/groupshadow等文件的内容. 这四个文件的意思 ...

  2. Unity问答——NGUI怎么使用按键模拟鼠标点击？

    这篇博客源自我在泰课在线的回答.链接:http://www.taikr.com/group/1/thread/248 问:NGUI怎么模拟用代码模拟控制点击 答: 1. 这个问题问得好.因为在使用按键 ...

  3. [POJ 2774] Long Long Message 【后缀数组】

    题目链接:POJ - 2774 题目分析 题目要求求出两个字符串的最长公共子串,使用后缀数组求解会十分容易. 将两个字符串用特殊字符隔开再连接到一起,求出后缀数组. 可以看出,最长公共子串就是两个字符 ...

  4. js弹出新窗口居中

    方式1: <script language="javascript"> var newUrl = <%=newUrl % > //window.locati ...

  5. codeforces D.Mashmokh and ACM

    题意:给你n和k,然后找出b1, b2, ..., bl(1 ≤ b1 ≤ b2 ≤ ... ≤ bl ≤ n),并且对所有的bi+1%bi==0,问有多少这样的序列? 思路:dp[i][j] 表示长 ...

  6. Android 中使用MediaRecorder进行录像详解（视频录制）

    在这里给出自己的一个测试DEMO,里面注释很详细.简单的视频录制功能. package com.video; import java.io.IOException; import android.ap ...

  7. 中国linux论坛

    linux在国内经过十多年的发展,已慢慢走向成熟.昔日如雨后春笋般成长的linux网站,现在已出现了明显的两极分化.一部分已成长壮大,公司化运作,一部分面临域名出售或关闭的境地.  以笔者经验,以下十 ...

  8. 使用ICSharpCode.SharpZipLib.Zip实现压缩与解压缩

    使用开源类库ICSharpCode.SharpZipLib.Zip可以实现压缩与解压缩功能,源代码和DLL可以从http://www.icsharpcode.net/OpenSource/SharpZ ...

  9. POJ 3177 Redundant Paths（重边标记法，有重边的边双连通分支）

    大致题意: 为了保护放牧环境,避免牲畜过度啃咬同一个地方的草皮,牧场主决定利用不断迁移牲畜进行喂养的方法去保护牧草.然而牲畜在迁移过程中也会啃食路上的牧草,所以如果每次迁移都用同一条道路,那么该条道路 ...

  10. 【并查集】【模拟】Codeforces 698B & 699D Fix a Tree

    题目链接: http://codeforces.com/problemset/problem/698/B http://codeforces.com/problemset/problem/699/D ...