针对大量数据在前端展示，需要进行分页显示，这里我使用的数据量为100万，数据存储在MongoDb中(也可以存储在本地文件或其它数据库中)。
最终显示效果如下：

步骤如下：

1.新建程序并配置，详见http://www.cnblogs.com/zhangtingzu/p/5746722.html，里面有具体的步骤；

2.新建数据类Model：学生类实体

    public class StudentInfo

     {

         public ObjectId _id { get; set; }

         public string NumberId { get; set; }

         public string Name { get; set; }

         public int Age { get; set; }

         [BsonDateTimeOptions(Kind = DateTimeKind.Local)]

         public DateTime StartDate { get; set; }

     }

3.前台页面(PageIndex.aspx)

 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="PageIndex.aspx.cs" Inherits="ExtNetPage.PageIndex" %>

 <!DOCTYPE html>

 <html>

 <head runat="server">

     <title>Ext.NET4..0分页简单示例</title>

     <link href="/resources/css/examples.css" rel="stylesheet" />

     <script type="text/javascript">

         var AgeChange = function (value) {

             var template = '<span style="color:{0};font-weight:bolder;font-size:14px;">{1}</span>';

             if (value >) {

                 return Ext.String.format(template, "Red", value);

             }

             else {

                 return Ext.String.format(template, "Blue", value);

             }

         }

     </script>

 </head>

 <body>

     <form runat="server">

         <ext:ResourceManager runat="server" Theme="Gray" />

         <ext:GridPanel ID="GridPanel1" runat="server" Title="数组列表" Width="">

             <Store>

                 <ext:Store ID="Store1" runat="server" OnReadData="MyData_Refresh" PageSize="">

                     <Proxy>

                         <ext:PageProxy></ext:PageProxy>

                     </Proxy>

                     <Model>

                         <ext:Model runat="server" IDProperty="NumberId">

                             <Fields>

                                 <ext:ModelField Name="NumberId" />

                                 <ext:ModelField Name="Name" />

                                 <ext:ModelField Name="Age" />

                                 <ext:ModelField Name="StartDate" />

                             </Fields>

                         </ext:Model>

                     </Model>

                 </ext:Store>

             </Store>

             <ColumnModel runat="server">

                 <Columns>

                     <ext:RowNumbererColumn runat="server" Header="<center>序号</center>" Width="" Align="Center" />

                     <ext:Column runat="server" Header="" DataIndex="NumberId" Width="" Hidden="true" Align="Center" />

                     <ext:Column runat="server" Header="学号" DataIndex="NumberId" Width="" Align="Center" />

                     <ext:Column runat="server" Header="姓名" DataIndex="Name" Width="" Align="Center" />

                     <ext:Column runat="server" Header="年龄" DataIndex="Age" Width="" Align="Center">

                         <Renderer Fn="AgeChange" />

                     </ext:Column>

                     <ext:DateColumn runat="server" Header="入学日期" DataIndex="StartDate" Width="" Format="yyyy-MM-dd HH:mm:ss" Align="Center" />

                 </Columns>

             </ColumnModel>

             <SelectionModel>

                 <ext:RowSelectionModel runat="server" Mode="Multi" />

             </SelectionModel>

             <View>

                 <ext:GridView runat="server" StripeRows="true" />

             </View>

             <BottomBar>

                 <ext:PagingToolbar ID="PagingToolbar1" runat="server">

                     <Items>

                         <ext:Label runat="server" Text="Page size:" />

                         <ext:ToolbarSpacer runat="server" Width="" />

                         <ext:ComboBox runat="server" ID="cbPageSize" Width="">

                             <Items>

                                 <ext:ListItem Text="" />

                                 <ext:ListItem Text="" />

                                 <ext:ListItem Text="" />

                                 <ext:ListItem Text="" />

                             </Items>

                             <SelectedItems>

                                 <ext:ListItem Value="" />

                             </SelectedItems>

                             <Listeners>

                                 <Select Handler="#{GridPanel1}.store.pageSize = parseInt(this.getValue(), 10); #{GridPanel1}.store.reload();" />

                             </Listeners>

                         </ext:ComboBox>

                     </Items>

                     <Plugins>

                         <ext:ProgressBarPager runat="server" />

                     </Plugins>

                 </ext:PagingToolbar>

             </BottomBar>

             <TopBar>

                 <ext:Toolbar runat="server">

                     <Items>

                         <ext:Button runat="server" Text="打印" Icon="Printer" Handler="this.up('grid').print();" />

                         <ext:Button runat="server" Text="打印当前页" Icon="Printer" Handler="this.up('grid').print({currentPageOnly : true});" />

                     </Items>

                 </ext:Toolbar>

             </TopBar>

         </ext:GridPanel>

     </form>

 </body>

 </html>
注：Theme="Gray"，可以设置皮肤，Default和Gray比较美观。

4.后台数据(PageIndex.aspx.cs)

 using Ext.Net;

 using ExtNetPage.Model;

 using ExtNetPage.Mongo;

 using System;

 using System.Collections.Generic;

 using System.Linq;

 using System.Web;

 using System.Web.UI;

 using System.Web.UI.WebControls;

 namespace ExtNetPage

 {

     public partial class PageIndex : System.Web.UI.Page

     {

         protected void Page_Load(object sender, EventArgs e)

         {

         }

         protected void MyData_Refresh(object sender, StoreReadDataEventArgs e)

         {

             List<StudentInfo> data = null;

             int total = ;

             data = ExtNetPage.PageIndex.GetPaging(e.Start <=  ?  : e.Start, Convert.ToInt32(this.cbPageSize.SelectedItem.Value), ref total);

             e.Total = total;

             this.Store1.DataSource = data;

             this.Store1.DataBind();

         }

         public static List<StudentInfo> GetPaging(int startRec, int MaxRec, ref int total)

         {

             OperatorMongo idb = new OperatorMongo();

             List<StudentInfo> data = new List<StudentInfo>();

             data = idb.GetList(startRec, MaxRec, ref total);

             return data;

         }

     }

 }

参考资料：http://examples.ext.net/#/GridPanel/ArrayGrid/ArrayWithPaging

Ext.NET 4.1.0 GridPanel数据分页的更多相关文章

  1. EXT中导出表格中的数据到Excel

    { itemId: 'excel', text: '导出', iconCls: 'btnExportExcel', disabled: false, handler: function () { // ...

  2. mysq大数据分页

    mysql limit大数据量分页优化方法 Mysql的优化是非常重要的.其他最常用也最需要优化的就是limit.Mysql的limit给分页带来了极大的方便,但数据量一大的时候,limit的性能就急 ...

  3. Sql Server 数据分页

    http://www.cnblogs.com/qqlin/archive/2012/11/01/2745161.html 1.引言 在列表查询时由于数据量非常多,一次性查出来会非常慢,就算一次查出来了 ...

  4. Oracle、MySql、SQLServer数据分页查询

    看过此博文后Oracle.MySql.SQLServer 数据分页查询,在根据公司的RegionRes表格做出了 SQLserver的分页查询语句: 别名.字段 FROM( SELECT row_nu ...

  5. 知方可补不足~SQL2005使用ROW_NUMBER() OVER()进行数据分页

    回到目录 数据分页是这个经常说的东西,无论在WEBForm还是WinForm中它都会被单独拿出来,或者是公用组件,或者是公用类库,反正对于数据分页这个东西,总是我们关注的一个话题,但事实上,数据分页归 ...

  6. Oracle中的数据分页

    --数据分页脚本 --创建包含数据分页代码元素声明的包头结构create or replace package data_controlis type type_cursor_data is ref ...

  7. 数据分页处理系列之三：Neo4j图数据分页处理

      首先简单介绍下Neo4j,Neo4j是一个高性能的NOSQL图形数据库,它将结构化数据存储在网络上而不是表中,它是一个嵌入式的.基于磁盘的.具备完全的事务特性的Java持久化引擎,但是它将结构化数 ...

  8. 数据分页处理系列之二：HBase表数据分页处理

      HBase是Hadoop大数据生态技术圈中的一项关键技术,是一种用于分布式存储大数据的列式数据库,关于HBase更加详细的介绍和技术细节,朋友们可以在网络上进行搜寻,笔者本人在接下来的日子里也会写 ...

  9. [.NET] SQL数据分页查询

    [.NET] SQL数据分页查询 程序下载 范例下载:点此下载 原始码下载:点此下载 NuGet封装:点此下载 数据查询 开发系统时,使用C#执行SQL查询指令,就可以从SQL数据库里查询所需数据. ...

随机推荐

  1. @Html.DropDownList 设置选中值无效

    有时候在ASP.NET  MVC中用@Html.DropDownList 设置选中值无效,如图: 具体原因说不清,反正只要改个名字就行了!!!,如图:::

  2. 少睡与吸烟影响IQ

        导读:据英国<每日邮报>报道,根据科学家一项最新研究发现,一晚的糟糕睡眠,对大脑可能产生很大损害,就等同头部遭到了一次严重的撞击.长期睡眠不好会造成智力下降,请看[科学探索]揭秘: ...

  3. iOS开发——项目实战总结&Block使用注意点浅析

    Block使用注意点浅析 1.在使用block前需要对block指针做判空处理. 不判空直接使用,一旦指针为空直接产生崩溃. if (!self.isOnlyNet) { if (succBlock ...

  4. Oracle存储过程，以逗号分隔字符串传参的处理

    Oracle存储过程,经常会遇见传入的参数是逗号分隔. 处理需要3步: 第一步,创建Type类型 第二部,创建函数 第三部,创建存储过程 代码如下: 第一步: create or replace ty ...

  5. wpf xaml inlines

    string testBold = "<Bold>Sync Now</Bold>";           var ele = System.Windows. ...

  6. RedRabbit——基于BrokerPattern服务器框架

    RedRabbit 经典网游服务器架构 该图省略了专门用途的dbserver.guildserver等用于专门功能的server,该架构的优点有: l LoginGate相当于DNS,可以动态的保证G ...

  7. prim算法java版

    public class Prim { static int MAX = 65535; public static void prim(int[][] graph, int n){ char[] c ...

  8. [转载]在 JavaScript 中判断“空值”

    http://lync.in/check-empty-value-in-javascript/ 有时候我们会遇到这样的情况:在一些前端控件要提交数据到服务器端的数据验证过程中,需要判断提交的数据是否为 ...

  9. [转]Entity Framework vs. LINQ to SQL

    Entity Framework和LINQ to SQL到底有什么区别?这是一个很常见的问题.下面的表中简要罗列了两种技术的主要区别. LINQ to SQL Entity Framework 复杂度 ...

  10. 使用Aspose.Cells 根据模板生成excel里面的 line chart

    目的: 1.根据模板里面的excel数据信息,动态创建line chart 2.linechart 的样式改为灰色 3.以流的形式写到客户端,不管客户端是否装excel,都可以导出到到客户端 4.使用 ...