之前一直用的是jquery的datatable实现分页效果,第一次使用vue下的element-ui,此篇博客记录一下踩坑后的实现。
首先,html页面
这边就不赘述,可去官网看文档
<div id="tabs">
<el-row>
<el-table ref="table"
:data="tableData"
border tooltip-effect="dark"
style="width:100%"
@selection-change="handleSelectionChange">
<el-table-column prop="id" label="ID" show-overflow-tooltip></el-table-column>
<el-table-column prop="jsdw" label="接收单位名称" show-overflow-tooltip></el-table-column>
<el-table-column prop="xxnr" label="内容" show-overflow-tooltip></el-table-column> <el-table-column prop="cjsj" label="发布时间" show-overflow-tooltip></el-table-column>
<el-table-column prop="ckzt" label="查看状态" :formatter="status" show-overflow-tooltip></el-table-column>
</el-table>
</el-row>
<!--列表底部工具条和分页符-->
<el-row>
<div class="selectPages">
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="currentPage"
:page-sizes="[10, 20, 30, 40]"
:page-size="pagesize"
layout="total, prev, pager, next, jumper"
:total="totalCount">
</el-pagination>
</div>
</el-row>
<div>
然后是js
var Main = new Vue({
el: '#tabs',
data:{
//默认每页数据量
pagesize: 10,
//默认当前页码
currentPage: 1,
//查询的页码
start: 1,
//默认数据总数
totalCount: 1000,
tableData: [],
multipleSelection: [],
url:'/industry/messages'
},
methods: {
//从服务器读取数据
loadData: function(criteria, pageNum, pageSize){
this.$http.get(this.url,
{params: {parameter:criteria,//查询值,可不加
pageNum:pageNum,//当前页码
pageSize:pageSize//每页数量
}},
).then(function(res){
this.tableData = res.data.content;
this.totalCount = res.data.totalElements;
},function(){
console.log('failed');
});
},
handleSelectionChange(val) {
this.multipleSelection = val;
},
//每条页数修改会触发
handleSizeChange(val) {
this.pagesize = val;
this.loadData(this.criteria, this.currentPage, this.pagesize);
},
//当前页面修改会触发
handleCurrentChange(val) {
this.currentPage = val;
this.loadData(this.criteria, this.currentPage, this.pagesize);
},
//查看状态
status: function(row, column){
if(row.ckzt === 0){
return "未查看";
}else if(row.ckzt === 1){
return "已查看";
}
},
}
});
Main.loadData(Main.criteria, Main.currentPage, Main.pagesize);
要注意的几个点
- this.$http.get()使用要导入包
< script src=“https://lib.baomitu.com/vue-resource/1.5.1/vue-resource.js”>< /script>
- get传参要用 params: {} (这里害我浪费了好多时间)
接着就是后端了,先是controller
/**
* table
*
* @param search
* @return
*/
@GetMapping("/messages")
@ResponseBody
public String queryPeccancy(@ModelAttribute MessageForm.Search search) {
//搜索
Page<Fsxx> pageResult = industryService.queryFsxxs(search);
//通过Json字符串返回前端
return JSON.toJSONString(pageResult);
}
这里没什么,接着是service和dao层,就放一起了
public Page<Fsxx> queryFsxxs(MessageForm.Search search) {
//分页数据处理
Pageable pageable = new PageRequest(search.getPageNum() - 1, search.getPageSize(), new Sort("id"));
Page<Fsxx> result = fsxxDao.findMessages(pageable);
return result;
}
//dao层:
@Query("select f from Fsxx f where f.sc =0")
Page<Fsxx> findMessages2(Pageable pageable);
注意的几个点
- 用@ModelAttribute获取里面参数要有pageNum,pageSize,还有自己要加的查询值
- 分页数据 search.getPageNum() - 1, search.getPageSize() 做分页查询
经过一天钻研把没接触过的东西实现,还是有些小成就感,总的来说也不难,主要是碰到小错误要耐心寻找,善于使用调试。