Extjs分页
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; } } }