Extjs分页

http://www.cnblogs.com/yqin/archive/2010/09/17/1829539.html

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         {
            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;
        }
    }
}



« 上一篇：Extjs 文件上传
» 下一篇：Extjs学习小结