Extjs分页使用java实现数据库数据查询

1、Extjs分页使用java实现数据库数据查询文章分类:Web前端   最近公司做一个项目用到Ext,其中需要用到一个分页的功能，在网上找了很久，有一些相关的内容，可感觉写都不是很清晰，而且大多数都是用ASP或者PHP之类实现的不是很适合我所做的项目，所以经过查看Ext方面书籍(轻松搞定Extjs),加上自己摸索，终于完成了适合自己使用的一个关于Ext分页功能的实现。项目用的是js、Ext、servlet。下面贴下代码： var obj = this; var pageSize = 20;   /统计结果分页每一页显示数据条数 /在这里使用Store来创建一个类似于

2、数据表的结构，因为需要远程获取数据，所以应该使用 /HttpProxy类，我是从后台读取的是json数据格式的数据，所以使用JsonReader来解析； var proxy = new Ext.data.HttpProxy(     url:"com.test.check.servlets.QueryDetailServlet" ); var statTime = Ext.data.Record.create(     name:"rowNo",type:"string",m

3、apping:"rowNo",     name:"gpsid",type:"string",mapping:"gpsid",     name:"policeName",type:"string",mapping:"policeName" ); var reader = new Ext.data.JsonReader(     totalProperty:"

4、;count", /此处与后台json数据中相对应，为数据的总条数     root:"data"      /这里是后台json数据相对应 ,statTime); var store = new Ext.data.Store(     proxy:proxy,     reader:reader ); /定义分页工具条 var bbarObj = new Ext.PagingToolbar(   

5、0; pageSize: pageSize,     store: store,     width: 300,     displayInfo: true,      /该属性为需要显示分页信息是设置     /这里的数字会被分页时候的显示数据条数所自动替换显示     displayMsg: '显示第 0 条到 1 条记录，一共 2 条',   

6、    emptyMsg: "没有记录",     prependButtons: true ); 在我的项目中使用的是GridPanel来进行显示数据表，所以定义如下： var grid = new Ext.grid.GridPanel(     store: store,     columns:              heade

7、r:'序号',width: 33, sortable: true,dataIndex:'rowNo',align:'center',          id:'gpsid',header:'GPS编号',width: 85, sortable: true,dataIndex:'gpsid',align:'center',          hea

8、der:'警员名称',width: 90, sortable: true,dataIndex:'policeName',align:'center'         ,      region:'center',      stripeRows: true,      title:'统计表',    

9、;  autoHeight:true,      width:302,      autoScroll:true,      loadMask:true,      stateful: true,      stateId: 'grid',      columnLines:true,     

10、; bbar:bbarObj   /将分页工具栏添加到GridPanel上     ); /在以下方法中向后台传送需要的参数，在后台servlet中可以使用 /request.getParameter("");方法来获取参数值； store.on('beforeload',function()            store.baseParams=      

11、        code: code,              timeType: timeType,              timeValue: timeValue     ); /将数据载入，这里参数为分页参数，会根据分页时候自动传送后台 /也是使用

12、request.getParameter("")获取 store.reload(                                         params:  

13、       start:0,         limit:pageSize     ); duty.leftPanel.add(grid); /将GridPanel添加到我项目中使用的左侧显示栏 duty.leftPanel.doLayout(); duty.leftPanel.expand();  /左侧显示栏滑出 后台servlet获取前台传输的参数： response.setContentType("text

14、/xml;charset=GBK"); String orgId = request.getParameter("code"); String rangeType = request.getParameter("timeType"); String rangeValue = request.getParameter("timeValue"); String start  = request.getParameter("start"); String limit = request.getPara

15、meter("limit"); StatService ss = new StatService(); String json = ss.getStatByOrganization(orgId, rangeType, rangeValue, start, limit); PrintWriter out = response.getWriter(); out.write(json); out.flush(); out.close(); 下面讲以下后台将从数据库查询的数据组织成前台需要的格式的json数据串 StringBuffer json = new StringBuffe

16、r(); String jsonData = "" . /这里用前台传来的参数进行数据库分页查询 int startNum = new Integer(start).intValue(); int limitNum = new Integer(limit).intValue(); startNum = startNum + 1; limitNum = startNum + limitNum; . rs = ps.executeQuery(); /这里的count即是前台创建的数据格式中的数据总数名称，与之对应，data同样 json.append("count:&

17、quot; + count + ",data:"); int i = startNum - 1;  /该变量用来设置数据显示序号 while(rs.next()        i = i + 1;        /这里的rowNo与前台配置的数据字段名称想对应，下面同样        json.append("rowNo:'" + i + "'

18、;,");        String gpsId = rs.getString("GPSID");        json.append("gpsid:'" + gpsId + "',");        String policeName = rs.getString("CALLNO");        json.append("po