Vue下的el-table+spring+hibernate實現分頁操作
阿新 • • 發佈:2018-12-20
之前一直用的是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()使用要匯入包
- 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() 做分頁查詢
經過一天鑽研把沒接觸過的東西實現,還是有些小成就感,總的來說也不難,主要是碰到小錯誤要耐心尋找,善於使用除錯。