Extjs的分页

来源：互联网发布：trunk端口的pvid 编辑：程序博客网时间：2024/06/10 05:09

Extjs分页其实是根据

store.load({params:{start:0,limit:10}}); 中start，limit这两个参数来进行分页的。start表示开始记录数，limit表示

一页的记录数。当store第一次load的时候，start=0，limit=10；当点击翻页按钮时，store进行load，此时

start=start+pageSize。如果pageSize=10，那么第二页start=10。

前台代码：

var store = new Ext.data.JsonStore({      url:'getAllProbe.ashx',      totalProperty:'total',      fields:

      ['id','probeArea','probeTime','explanation','areaMark'],

      //record是按照此字段数据进行解析       root:'root',      remoteSort:true        });

var pagingToolbar = new Ext.PagingToolbar({      emptyMsg:"没有数据",      displayInfo:true,      displayMsg:"显示从{0}条数据到{1}条数据，共{2}条数据",      store:store,      pageSize:10 });

var dataGrid = new Ext.grid.GridPanel({      id:'dataGrid',      title:'结果显示',      frame:true,      store:store,      width:windowWidth-16,      height:windowHeight-250,         cm:cm,      frame:true,      autoScroll:true,      stripeRows:true,      bbar:pagingToolbar,      listeners:{                'render':function(){                      this.bbar.dom.align='center';   }}});

store.load({params:{start:0,limit:10}});

后台可以一次性的将所有的记录查找出来然后根据start，limit的值每次返回的Json串。

也可以根据start和limit的值每一页进行一次查询。为了分页Json串中要加上total表示记录的总条数。

后台代码：

using System;using System.Web;using System.Collections;public class getAllProbe : IHttpHandler {        public void ProcessRequest (HttpContext context) {              context.Response.ContentType = "text/plain";        int limit = Convert.ToInt32(context.Request["limit"]);        int start =Convert.ToInt32(context.Request["start"]);                     ProbeAccess pa = new ProbeAccess();        ArrayList probeList;        probeList = pa.GetAllProbe();    //取得所有记录        int count = probeList.Count;     //记录的总数        string json = "{\"total\":"+count+",\"root\":[";              for (int i = start; i < limit+start&&i<count; i++)        {            json += "{\"id\":" + "\"" + ((Probe)probeList[i]).Id + "\"" + "," + "\"probeArea\":" + "\"" +

                   ((Probe)probeList[i]).Probe_area + "\"" + "," + "\"probeTime\":" + "\"" +

                   ((Probe)probeList[i]).Probe_time + "\"" + "," + "\"explanation\":" + "\"" +

                   ((Probe)probeList[i]).Explanation + "\"" + "," + "\"areaMark\":" + "\"" +

                   ((Probe)probeList[i]).Area_mark + "\"" + "},";        }        json += "]}";        json = json.Replace(",]}", "]}");        context.Response.Write(json);            }         public bool IsReusable {        get {            return false;        }    }}