![[Extjs] Ext4 Ext.grid.Panel 分页实现（mybatis 分页插件-PageHelper 使用）](https://image.shishitao.com:8440/aHR0cHM6Ly9ia3FzaW1nLmlrYWZhbi5jb20vdXBsb2FkL2NoYXRncHQtcy5wbmc%2FIQ%3D%3D.png?!?w=700&webp=1 "[Extjs] Ext4 Ext.grid.Panel 分页实现（mybatis 分页插件-PageHelper 使用）")
先看图：
![[Extjs] Ext4 Ext.grid.Panel 分页实现（mybatis 分页插件-PageHelper 使用）](https://image.shishitao.com:8440/aHR0cHM6Ly9pbWFnZXMyMDE1LmNuYmxvZ3MuY29tL2Jsb2cvNjU3MTY3LzIwMTYwMi82NTcxNjctMjAxNjAyMjAyMTE1MTEyMzMtMTM0MTYyMDY5NC5wbmc%3D.png?w=700&webp=1 "[Extjs] Ext4 Ext.grid.Panel 分页实现（mybatis 分页插件-PageHelper 使用）")
页面js代码：
var userStore=Ext.create('Ext.data.Store', {
storeId:'userStore',
fields:['uname', 'email', 'phone','regIp','regTime'],
proxy: {
type: 'ajax',
url:'${pageContext.request.contextPath}/back/user/userList.do',
reader: {
// 設置 json樣式
type: 'json',
rootProperty:"rows",
totalProperty:"total"
}
},
autoLoad: true,
pageSize:10 //每页记录数默认25
});
userStore.load({
params: {
start: 0,
limit: 10
}
});
var ckm=Ext.create("Ext.selection.CheckboxModel");
Ext.onReady(function(){
Ext.create('Ext.grid.Panel', {
title: '用户信息',
id:'userGridPanel',
selModel:ckm,
store:userStore,// Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ text: '用户ID', dataIndex: 'uid',align: 'center',hidden:true,sortable:false },
{ text: '用户名', dataIndex: 'uname',align: 'center',
sortable:false },
{ text: '邮箱', dataIndex: 'email',align: 'center',sortable:false },
{ text: '电话', dataIndex: 'phone',align: 'center',sortable:false },
{ text: '注册IP', dataIndex: 'regIp',align: 'center',sortable:false },
{ text: '注册时间', dataIndex: 'regTime',align: 'center',scope:this,renderer:function(value){
var val=longToString(value,'Y-m-d H:m:s')
//console.info('获取的值为:{}'+value+' , '+val);
return val;
} }
],
forceFit:true,//强制列表宽度自适应
autoLoad:true,
tbar: Ext.create('Ext.toolbar.Toolbar',{
//width : 500,
items: [{
text: '删除',
xtype: 'button',
iconCls: 'delete',
id: 'user_delete',
handler: userInfoDel
},{
text:'添加',
xtype:'button',
iconCls:'add',
id:'user_add',
handler:userInfoAdd
},{
text:'修改',
xtype:'button',
iconCls:'update',
id:'user_update',
handler:userInfoUpdate
}]
}),
renderTo: Ext.getBody(),
//分页
bbar: Ext.create('Ext.toolbar.Paging',{
beforePageText:'当前第',
afterPageText:'页',
refreshText:'刷新',
store:userStore,
displayInfo:true,
displayMsg:'显示:{0}-{1}条,总共:{2}条',
emptyMsg:'当前查询无记录'
})
});
});
//删除用户信息
function userInfoDel(){
var uid='';
var selectionModel = Ext.getCmp('userGridPanel').getSelectionModel();
var selection = selectionModel.getSelection();
if(selection.length==0){
Ext.Msg.alert("提示","请选择要删除的记录!");
return ;
}else{
Ext.Msg.confirm("提示","确定删除?",function(button, text){
console.info(button+","+text);
if(button=="yes"){
for(var i=0;i<selection.length;i++){
uid = uid+selection[i].get('uid')+",";
}
Ext.Ajax.request({
url: '${pageContext.request.contextPath}/back/user/delete.do',
params:{uid:uid},
/**
*Object {request: Object, requestId: 3, status: 200, statusText: "OK",
* responseText: "{"restMsg":"用户删除成功!","success":true}"…}
* @param response
* @param opts
*/
success: function(response, opts) {
Ext.Msg.alert("信息提示",response.responseText.restMsg);
Ext.getCmp('userGridPanel').getStore().reload();
},
failure: function(response, opts) {
Ext.Msg.alert("信息提示",response.responseText.restMsg);
}
});
}
});
}
}
//修改用户信息
function userInfoUpdate(){
var selectionModel = Ext.getCmp('userGridPanel').getSelectionModel();
var selection = selectionModel.getSelection();
if(selection.length==0){
Ext.Msg.alert("提示","请选择要修改的记录!");
return ;
}
if(selection.length>1){
Ext.Msg.alert("提示","只能修改一条记录!");
return ;
}
//获取选择的记录
var record =selectionModel.getLastSelected();
console.info(record.get("email")+","+record.get("phone"));
}
看分页后台实现：
1.在mybatis配置文件中添加配置：
<plugins>
<plugin interceptor="com.github.pagehelper.PageHelper">
<!-- 4.0.0以后版本可以不设置该参数 -->
<!--<property name="dialect" value="mysql"/>-->
<!-- 该参数默认为false -->
<!-- 设置为true时，会将RowBounds第一个参数offset当成pageNum页码使用 -->
<!-- 和startPage中的pageNum效果一样-->
<property name="offsetAsPageNum" value="true"/>
<!-- 该参数默认为false -->
<!-- 设置为true时，使用RowBounds分页会进行count查询 -->
<property name="rowBoundsWithCount" value="true"/>
<!-- 设置为true时，如果pageSize=0或者RowBounds.limit = 0就会查询出全部的结果 -->
<!-- （相当于没有执行分页查询，但是返回结果仍然是Page类型）-->
<property name="pageSizeZero" value="true"/>
<!-- 3.3.0版本可用 - 分页参数合理化，默认false禁用 -->
<!-- 启用合理化时，如果pageNum<1会查询第一页，如果pageNum>pages会查询最后一页 -->
<!-- 禁用合理化时，如果pageNum<1或pageNum>pages会返回空数据 -->
<property name="reasonable" value="true"/>
<!-- 3.5.0版本可用 - 为了支持startPage(Object params)方法 -->
<!-- 增加了一个`params`参数来配置参数映射，用于从Map或ServletRequest中取值 -->
<!-- 可以配置pageNum,pageSize,count,pageSizeZero,reasonable,orderBy,不配置映射的用默认值 -->
<!-- 不理解该含义的前提下，不要随便复制该配置 -->
<property name="params" value="pageNum=start;pageSize=limit;"/>
<!-- 支持通过Mapper接口参数来传递分页参数 -->
<property name="supportMethodsArguments" value="true"/>
<!-- always总是返回PageInfo类型,check检查返回类型是否为PageInfo,none返回Page -->
<property name="returnPageInfo" value="check"/>
</plugin>
</plugins>
或者在spring的配置文件中添加配置：
<bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
<property name="dataSource" ref="dataSource"/>
<property name="mapperLocations">
<array>
<value>classpath:config/mapper/*.xml</value>
</array>
</property>
<property name="typeAliasesPackage" value="com.test.pojo"/>
<property name="plugins">
<array>
<bean class="com.github.pagehelper.PageHelper">
<property name="properties">
<value>
dialect=mysql
</value>
</property>
</bean>
</array>
</property>
</bean>
2. dao 文件：
public interface UserDao extends BaseDao {
List<User> queryForUsers(Map<String, Object> map);
@Override
int delete(int id) throws Exception;
}
service层对应文件：
/**
* @author zhangtb
* @date 2015年12月20日13:26:50
*/ @Service
public class UserService { @Autowired
private UserDao userDao; public List<User> queryForUsers(Map<String, Object> map){
return userDao.queryForUsers(map);
} }
3.controller中分页实现：
/**
* 用户列表信息
*/
@RequestMapping("/userList")
@ResponseBody
public void userList(HttpServletRequest request,Writer writer){
String name = request.getParameter("name");
Page page = PageUtil.getPage(request);
Map<String, Object> map = new HashMap<String,Object>();
map.put("name",name);
map.put("page",page.getPage());
map.put("limit",page.getLimit());
PageHelper.startPage((Integer) map.get("page"),(Integer)map.get("limit"));
List<User> userList=userService.queryForUsers(map);
PageInfo<User> pageInfo=new PageInfo<>(userList);
List<User> users=pageInfo.getList();
long total = pageInfo.getTotal();
JSONObject row=new JSONObject();
JSONArray ary = new JSONArray();
for(User user :users){
ary.add(user);
}
row.put("rows",ary);
row.put("total",total);
try {
writer.write(row.toJSONString());
} catch (IOException e) {
e.printStackTrace();
}
}
返回数据为：
{"total":12,"rows":[{"email":"233434@163.com","phone":"17890123421","regIp":"127.0.0.1","regTime":1454883085000,"uid":1,"uname":"admin"},{"email":"434234234234","phone":"3242432423","regIp":"127.0.0.1","regTime":1456997965000,"uid":2,"uname":"我看"},{"email":"233434@163.com","phone":"17890123421","regIp":"","regTime":1456394760000,"uid":4,"uname":"Test_001"},{"email":"233434@163.com","phone":"17890123421","regIp":"172.189.12.32","regTime":1456394760000,"uid":5,"uname":"TEST_002"},{"email":"233434@163.com","phone":"18910121322","regIp":"localhost","regTime":1454926128000,"uid":6,"uname":"TEST_003"},{"email":"fsfs@sina.com.cn","phone":"19019324321","regIp":"localhost","regTime":1454969111000,"uid":7,"uname":"Test_0023"},{"email":"fsfs@sina.com.cn","phone":"19019324321","regIp":"localhost","regTime":1454969389000,"uid":8,"uname":"Test_0024"},{"email":"fsfs@sina.com.cn","phone":"19019324321","regIp":"localhost","regTime":1454969390000,"uid":9,"uname":"Test_0025"},{"email":"fsfs@sina.com.cn","phone":"19019324321","regIp":"localhost","regTime":1454969390000,"uid":10,"uname":"Test_0026"},{"email":"fsfs@sina.com.cn","phone":"19019324321","regIp":"localhost","regTime":1454969390000,"uid":11,"uname":"Test_0027"}]}
至此，mybatis的分页实现结束。