1:加入依赖
<!--分页插件 -->
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper</artifactId>
<version>4.1.4</version>
</dependency>
2:配置Mybatis
package com.hdys.www.config;
import java.util.Properties;import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import com.github.pagehelper.PageHelper;
/*
* 注册MyBatis分页插件PageHelper
*/
@Configuration
public class MyBatisConf {
@Bean
public PageHelper pageHelper() {
PageHelper pageHelper = new PageHelper();
Properties p = new Properties();
p.setProperty("offsetAsPageNum", "true");
p.setProperty("rowBoundsWithCount", "true");
p.setProperty("reasonable", "true");
pageHelper.setProperties(p);
return pageHelper;
}
}
3:controller
@RestController
public class ManagerPersonController {
@Autowired
private ManagerPersonService managerPersonService ;
@RequestMapping(value = "/queryAdminsByPage", method = RequestMethod.GET,produces = "application/json;charset=utf-8")
public String queryAdminsByPage( @RequestParam(value="pageNum")int pageNum, @RequestParam(value="pageSize")int pageSize) {
Page<AdminInfo> page = managerPersonService.selectAdmins(pageNum, pageSize);
Map<String, Object> map = new HashMap<String, Object>();
map.put("tableData", page);
map.put("totalCount", page.getTotal());
Gson gson = new Gson();
String jsonStr=gson.toJson(map);
return jsonStr;
}
}
返回page的相关信息在这:
Page{count=true, pageNum=1, pageSize=5, startRow=0, endRow=5, total=15, pages=3, countSignal=false, orderBy='null', orderByOnly=false, reasonable=true, pageSizeZero=false}
4:service实现层
@Service
public class ManagerPersonServiceImp implements ManagerPersonService {
@Autowired
private AdminInfoMapper adminInfoMapper;
@Override
public Page<AdminInfo> selectAdmins(int pageNum, int pageSize) {
// TODO Auto-generated method stub
Page<AdminInfo> page= PageHelper.startPage(pageNum,pageSize);
page =adminInfoMapper.getAdminList();
return page;
}
}
5:DAO
//省略其他代码
public Page<AdminInfo> getAdminList();
6:xml
<select id="getAdminList" resultType="com.hdys.www.background.pojo.AdminInfo">
select * from hdys.admin_info
</select>
7:jsp
//饿了么分页插件
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[5, 10, 15, 20]"
:page-size="pagesize"
:total="totalCount"
style="float:right"
layout="total, sizes, prev, pager, next, jumper">
</el-pagination>
8:Vue代码
ew Vue({
el: '#app',
data: {
hide:false,
//默认每页数据量
pagesize: 5,
//默认当前页
currentPage: 1,
//默认数据总数
totalCount: 1000,
tableData: [],
multipleSelection: []
} ,
created: function () {
var ctx = this;
ctx.loadData(ctx.currentPage, ctx.pagesize)
},
methods: {
//从服务器读取数据
loadData: function(pageNum, pageSize){
var ctx = this;
debugger;
axios.get('${ctx}/queryAdminsByPage',
{
params:{ //请求参数
pageNum : pageNum,
pageSize:pageSize
}
}
).then(
function (params) {
console.log(params.data.tableData);
ctx.tableData = params.data.tableData;
ctx.totalCount = params.data.totalCount;
}
);
},
handleSizeChange:function(val) {
console.log('每页'+ val+' 条');
this.pagesize = val;
this.loadData(this.currentPage, this.pagesize);
},
handleCurrentChange:function(val) {
console.log('当前页: '+val);
this.currentPage = val;
this.loadData(this.currentPage, this.pagesize);
},
handleClick(index,row) {
console.log(index,row.uSER_ID);
},
toggleSelection(rows) {
if (rows) {
rows.forEach(row => {
this.$refs.multipleTable.toggleRowSelection(row);
});
} else {
this.$refs.multipleTable.clearSelection();
}
},
handleSelectionChange(val) {
this.multipleSelection = val;
}
}
})