Extjs分页详解
来源:互联网 发布:二甲双胍 知乎 编辑:程序博客网 时间:2024/05/27 19:27
http://blog.sina.com.cn/s/blog_77e940bd01010ov8.html
相信不少刚学Extjs的都会在分页那里感到头疼,网上一大堆例子,找不到一个能说明白是怎样去操作数据库的。下面我来跟大家详解一下:
<script type="text/javascript">
Ext.onReady(function () {
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
var reader=new Ext.data.JsonReader({
root: 'data',
totalProperty: 'count',
id:'candidateNo',
},[{name:'name'},
{name:'candidateNo'},
{name:'score'},
{name:'positionId'},
{name:'rank'}
]);
var ds = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: "<%=request.getContextPath()%>/servlet/jsonServlet? positionId=${param.positionId}", method: 'POST', jsonData: { CurPageIndex: 0 }
}),
reader: reader,
});
var Colnum = new Ext.grid.ColumnModel([
{header:'名字',dataIndex:'name'},
{header:'准考证号',dataIndex:'candidateNo'},
{header:'分数',dataIndex:'score'},
{header:'职位代码',dataIndex:'positionId'},
{header:'名次',dataIndex:'rank'}
]);
var pagebar = new Ext.PagingToolbar({
pageSize: 10,
store: ds,
displayInfo: true,
displayMsg: '显示第 {0} 条到 {1} 条记录,一共 {2} 条',
emptyMsg: "没有记录"
});
var grid = new Ext.grid.GridPanel({
renderTo: 'grid',
autoHeight: true,
width:500,
store: ds,
cm: Colnum,
viewConfig: {
autoFill: true
},
bbar: pagebar
});
ds.load({ params: { start: 0, limit: 10} });
});
</script>
重点:Extjs的分页,跟我们通常做的分页原理是一样的,就是往后台传递页码和单页显示条目数量,只不过Extjs传递的是start和limit两个参数。当你点击下一页/上一页时,Extjs自动向后台传递,不用你操心。start代表的是要显示的页码上面的第一个条目在总条目中的index(也就是排第几个),而limit就是每页要显示的条目数量。我们如何获得这两个参数呢?很简单,通过request.getParameter("start");就可以获得。然后我们可以再根据实际情况计算出页码。比如:pageNow = start/limit + 1 就是要显示的页码,再根据pageNow去数据库获取需要的数据。一般我们会有一个方法可以根据页码从数据库取数据的方法:如:public List<?> findbyPage(int pageNow,int pageSize);还有一点需要注意的是:ds.load({ params: { start: 0, limit: 10} });里面statr和limit是第一次请求时向后台传的数据,如果不写,第一次请求时后台取到的start和limit为null,所以如果你在后台有把取到的start转为int的话就会抛异常了。
前一篇:android权限总结(三)
相信不少刚学Extjs的都会在分页那里感到头疼,网上一大堆例子,找不到一个能说明白是怎样去操作数据库的。下面我来跟大家详解一下:
<script type="text/javascript">
Ext.onReady(function () {
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
var reader=new Ext.data.JsonReader({
root: 'data',
totalProperty: 'count',
id:'candidateNo',
},[{name:'name'},
{name:'candidateNo'},
{name:'score'},
{name:'positionId'},
{name:'rank'}
]);
var ds = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: "<%=request.getContextPath()%>/servlet/jsonServlet? positionId=${param.positionId}", method: 'POST', jsonData: { CurPageIndex: 0 }
}),
reader: reader,
});
var Colnum = new Ext.grid.ColumnModel([
{header:'名字',dataIndex:'name'},
{header:'准考证号',dataIndex:'candidateNo'},
{header:'分数',dataIndex:'score'},
{header:'职位代码',dataIndex:'positionId'},
{header:'名次',dataIndex:'rank'}
]);
var pagebar = new Ext.PagingToolbar({
pageSize: 10,
store: ds,
displayInfo: true,
displayMsg: '显示第 {0} 条到 {1} 条记录,一共 {2} 条',
emptyMsg: "没有记录"
});
var grid = new Ext.grid.GridPanel({
renderTo: 'grid',
autoHeight: true,
width:500,
store: ds,
cm: Colnum,
viewConfig: {
autoFill: true
},
bbar: pagebar
});
ds.load({ params: { start: 0, limit: 10} });
});
</script>
重点:Extjs的分页,跟我们通常做的分页原理是一样的,就是往后台传递页码和单页显示条目数量,只不过Extjs传递的是start和limit两个参数。当你点击下一页/上一页时,Extjs自动向后台传递,不用你操心。start代表的是要显示的页码上面的第一个条目在总条目中的index(也就是排第几个),而limit就是每页要显示的条目数量。我们如何获得这两个参数呢?很简单,通过request.getParameter("start");就可以获得。然后我们可以再根据实际情况计算出页码。比如:pageNow = start/limit + 1 就是要显示的页码,再根据pageNow去数据库获取需要的数据。一般我们会有一个方法可以根据页码从数据库取数据的方法:如:public List<?> findbyPage(int pageNow,int pageSize);还有一点需要注意的是:ds.load({ params: { start: 0, limit: 10} });里面statr和limit是第一次请求时向后台传的数据,如果不写,第一次请求时后台取到的start和limit为null,所以如果你在后台有把取到的start转为int的话就会抛异常了。
前一篇:android权限总结(三)
0 0
- Extjs分页详解
- Extjs分页详解
- extjs分页
- extjs分页
- ExtJs分页
- ExtJs分页
- Extjs分页
- extjs分页
- extjs分页以及查询分页
- Extjs 前台分页(假分页)
- EXTJS分页技术
- extjs分页2
- ExtJs combo设置分页
- ExtJs 中GridPanel分页
- ExtJS 分页技术
- Extjs的分页
- extjs combobox分页查询
- ExtJS中GridPanel分页
- ios 日期格式 日期转换
- 关于傅里叶变换和小波变换的学习和研究
- 对Java Serializable(序列化)的理解和总结
- 模糊搜索ip地址
- studio 运行到模拟器报错 如何解决?
- Extjs分页详解
- 写博客
- js中2个等号与3个等号的区别(js == 与 === 的区别)
- Google Wallet 支付接入(内购买商品)后端处理逻辑及问题分析
- U盘引导安装ubuntu16.04(包括多linux)
- 最详尽的 Swift 代码规范指南
- CC2540错误码
- iOS开发之格式化日期时间
- 差分约束系统 2016.11.10