Extjs分页使用java实现数据库数据查询
最近公司做一个项目用到Ext,其中需要用到一个分页的功能,在网上找了很久,有一些相关的内容,可感觉写都不是很清晰,而且大多数都是用ASP或者PHP之类实现的不是很适合我所做的项目,所以经过查看Ext方面书籍(轻松搞定Extjs),加上自己摸索,终于完成了适合自己使用的一个关于Ext分页功能的实现。项目用的是js、Ext、servlet。下面贴下代码:
var obj = this;
var pageSize = 20; //统计结果分页每一页显示数据条数
//在这里使用Store来创建一个类似于数据表的结构,因为需要远程获取数据,所以应该使用
//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",mapping:"rowNo"},
{name:"gpsid",type:"string",mapping:"gpsid"},
{name:"policeName",type:"string",mapping:"policeName"}
]);
var reader = new Ext.data.JsonReader({
totalProperty:"count", //此处与后台json数据中相对应,为数据的总条数
root:"data" //这里是后台json数据相对应
},statTime);
var store = new Ext.data.Store({
proxy:proxy,
reader:reader
});
//定义分页工具条
var bbarObj = new Ext.PagingToolbar({
pageSize: pageSize,
store: store,
width: 300,
displayInfo: true, //该属性为需要显示分页信息是设置
//这里的数字会被分页时候的显示数据条数所自动替换显示
displayMsg: '显示第 {0} 条到 {1} 条记录,一共 {2} 条',
emptyMsg: "没有记录",
prependButtons: true
});
在我的项目中使用的是GridPanel来进行显示数据表,所以定义如下:
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{header:'序号',width: 33, sortable: true,dataIndex:'rowNo',align:'center'},
{id:'gpsid',header:'GPS编号',width: 85, sortable: true,dataIndex:'gpsid',align:'center'},
{header:'警员名称',width: 90, sortable: true,dataIndex:'policeName',align:'center'}
],
region:'center',
stripeRows: true,
title:'统计表',
autoHeight:true,
width:302,
autoScroll:true,
loadMask:true,
stateful: true,
stateId: 'grid',
columnLines:true,
bbar:bbarObj //将分页工具栏添加到GridPanel上
});
//在以下方法中向后台传送需要的参数,在后台servlet中可以使用
//request.getParameter("");方法来获取参数值;
store.on('beforeload',function(){
store.baseParams={
code: code,
timeType: timeType,
timeValue: timeValue
}
});
//将数据载入,这里参数为分页参数,会根据分页时候自动传送后台
//也是使用request.getParameter("")获取
store.reload({
params:{
start:0,
limit:pageSize
}
});
duty.leftPanel.add(grid); //将GridPanel添加到我项目中使用的左侧显示栏
duty.leftPanel.doLayout();
duty.leftPanel.expand();