ExtJS4.2学习(六)表格分页与通过后台脚本获得分页数据
鸣谢:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-12/175.html
------------------------------------------------------------------------------------------
效果图:
这里用servlet技术简单处理下:
UserServices.java
package cn.com.shuyangyang.services; import java.io.IOException; import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; @SuppressWarnings("serial")
public class UserServices extends HttpServlet { @Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
doPost(req,resp);
} @Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
String start = req.getParameter("start");
String limit = req.getParameter("limit"); try{
int index = Integer.parseInt(start);
int pageSize = Integer.parseInt(limit); String json = "{total:100,root:[";
for(int i = index;i<pageSize+index;i++){
json +="{id:"+i+",name:'name"+i+"',descn:'desc"+i+"'}";
if(i!=pageSize + index - 1){
json+=",";
}
}
json+="]}";
resp.getWriter().write(json);
}catch(Exception e){
e.printStackTrace();
}
} }
获得的数据通过测试程序打印出来,如下:
{totalProperty:100,root:[
{id:0,'name:'name0',descn:'desc0'},{id:1,'name:'name1',descn:'desc1'},{id:2,'name:'name2',descn:'desc2'},{id:3,'name:'name3',descn:'desc3'},
{id:4,'name:'name4',descn:'desc4'},{id:5,'name:'name5',descn:'desc5'},{id:6,'name:'name6',descn:'desc6'},{id:7,'name:'name7',descn:'desc7'},
{id:8,'name:'name8',descn:'desc8'},{id:9,'name:'name9',descn:'desc9'}
]}
我的servlet配置如下:
<servlet>
<servlet-name>userService</servlet-name>
<servlet-class>cn.com.shuyangyang.services.UserServices</servlet-class>
</servlet> <servlet-mapping>
<servlet-name>userService</servlet-name>
<url-pattern>/userServlet</url-pattern>
</servlet-mapping>
接下来是js代码:
/**
* Grid
* 此js演示了如何通过后台获得分页数据
*/
//表格数据最起码有列、数据、转换原始数据这3项
Ext.onReady(function(){
//定义列
var columns = [
{header:'编号',dataIndex:'id',width:50}, //sortable:true 可设置是否为该列进行排序
{header:'名称',dataIndex:'name',width:80},
{header:'描述',dataIndex:'descn',width:112}
]; //转换原始数据为EXT可以显示的数据
var store = new Ext.data.Store({
proxy:{
type:'ajax',
url:'/extjsTest1/userServlet',
reader:{
type:'json',
totalProperty:'total',
root:'root',
idProperty:'id'
}
},
fields:[
{name:'id'}, //mapping:0 这样的可以指定列显示的位置,0代表第1列,可以随意设置列显示的位置
{name:'name'},
{name:'descn'},
{name:'status'}
]
}); //创建表格
var grid = new Ext.grid.GridPanel({
renderTo:'grid', //渲染位置
autoHeight:true,
store:store,
width:570,
columns:columns, //显示列
forceFit:true, //自动填满表格
bbar:new Ext.PagingToolbar({
pageSize:25, //每页显示几条数据
store:store,
displayInfo:true, //是否显示数据信息
displayMsg:'显示第 {0} 条到 {1} 条记录,一共 {2} 条', //只要当displayInfo为true时才有效,用来显示有数据时的提示信息,{0},{1},{2}会自动被替换成对应的数据
emptyMsg: "没有记录" //没有数据时显示信息
}),
tbar:new Ext.PagingToolbar({
pageSize:25, //每页显示几条数据
store:store,
displayInfo:true, //是否显示数据信息
displayMsg:'显示第 {0} 条到 {1} 条记录,一共 {2} 条', //只要当displayInfo为true时才有效,用来显示有数据时的提示信息,{0},{1},{2}会自动被替换成对应的数据
emptyMsg: "没有记录" //没有数据时显示信息
})
}); //加载数据
store.load({params:{start:0,limit:25}});
});
在这里我发现了个问题,尽管我在前台设置了pageSize为10或者其他数值,但是最终的结果总是第一页显示你设置的条数,第二页就有问题了,暂时还不知道什么原因。知道的麻烦告诉我下。
ExtJS4.2学习(六)表格分页与通过后台脚本获得分页数据的更多相关文章
- ExtJS4.2学习(八)表格限制输入数据的类型(转)
鸣谢:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-14/177.html --------------- ...
- ExtJS4.2学习(五)表格渲染与复选框
鸣谢:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-10/174.html --------------- ...
- ExtJS4.2学习(21)动态菜单与表格数据展示操作总结篇2
运行效果: 此文介绍了根据操作左侧菜单在右面板展示相应内容. 一.主页 先看一下跳转主页的方式:由在webapp根目录下的index.jsp跳转至demo的index.jsp 下面是demo的inde ...
- ExtJS4.2学习(九)属性表格控件PropertyGrid(转)
鸣谢网址:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-15/178.html ------------- ...
- ExtJS4.2学习(14)基于表格的扩展插件(2)(转)
鸣谢:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-26/184.html --------------- ...
- ExtJS4.2学习(13)基于表格的扩展插件---rowEditing
鸣谢:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-24/182.html --------------- ...
- ExtJS4.2学习(11)——高级组件之Grid
大纲: 1.首先,搭建起来一个最基础的Grid组件: 2.其次,利用前边MVC架构将代码重构: 3.再者,介绍下Grid的一些特性. 一.搭建基础的Grid组件 在文章的开始,我们首先简单的搭建一个G ...
- 学习ASP.NET Core Razor 编程系列十九——分页
学习ASP.NET Core Razor 编程系列目录 学习ASP.NET Core Razor 编程系列一 学习ASP.NET Core Razor 编程系列二——添加一个实体 学习ASP.NET ...
- Android 学习笔记之AndBase框架学习(六) PullToRefrech 下拉刷新的实现
PS:Struggle for a better future 学习内容: 1.PullToRefrech下拉刷新的实现... 不得不说AndBase这个开源框架确实是非常的强大..把大部分的东西 ...
随机推荐
- 解决Jquery和prototype的兼容问题
1. 引入jquery 时,将jquery库在 prototype之前引入: 2.使用时: jQuery.noConflict(); // 这个要在 之前加上 3.初始化加载 (这里我试过,可以有两 ...
- HttpClient(4.3.5) - HTTP Authentication
HttpClient provides full support for authentication schemes defined by the HTTP standard specificati ...
- Android之触屏事件
方法一: 新建"MyView"类 package onTouchEvent; import android.content.Context; import android.grap ...
- .NET微信支付(H5仅限公众号支付)
闲来无事,恰好有一个要用微信公众平台支付的功能,研究来研究去,就是要细心和多看腾讯提供的文档.当然有几个坑是很有必要说明一下的 公众号支付,这里统一叫H5支付,以下都是. 在做H5支付的时候,第一步就 ...
- vs如何新建自己工程的环境变量(局部)和 Windows系统(全局).
来源:http://blog.csdn.net/jtop0/article/details/7574139 在vs2008的Project->Property设置里经常会看到类似$ ...
- 我的博客已搬迁到http://www.lsworks.net
我的博客已搬迁到http://www.lsworks.net
- 急缺【jQuery】人才,要求熟悉jQuery,熟悉Js,熟悉前端开发
是一份兼职 是与jQuery相关的写作任务,有写作兴趣的欢迎站短(有blog者优先). 要求就是熟悉js和jquery,项目经验丰富(项目经验一定要丰富). 钱不多,不到1W,如果月薪超过1W的,我想 ...
- Nodejs 处理gb2312内容乱码问题
在使用cheerio处理request模块返回的gb2312网页出现了乱码,从开始一直排查问题,一直排查到request.cheerio都有问题. 首先request会进行一次转码,这里需要设置req ...
- HTML5 Video(视频)
HTML5 Video(视频) 很多站点都会使用到视频. HTML5 提供了展示视频的标准. 检测您的浏览器是否支持 HTML5 视频: 检测 Web站点上的视频 直到现在,仍然不存在一项旨在网页上显 ...
- gets--vs--fgets
gets fget的区别 这两个函数都能从标准的输入流中读取信息,比如从键盘中输入信息,但是有些区别. 使用gets当输入的字符多于预定个数时候,会造成溢出,程序报错. int main(int ...