1. 逻辑分页(假分页)
逻辑分页依赖的是程序员编写的代码。数据库返回的不是分页结果,而是全部数据,然后再由程序员通过代码获取分页数据,常用的操作是一次性从数据库中查询出全部数据并存储到List集合中,因为List集合有序,再根据索引获取指定范围的数据。
2. 物理分页(真分页)
物理分页依赖的是某一物理实体,这个物理实体就是数据库,比如MySQL数据库提供了limit关键字,程序员只需要编写带有limit关键字的SQL语句,数据库返回的就是分页结果。
前端:
- element组件
<el-pagination
:total="total"
style="margin-top: 8px;"
layout="total, prev, pager, next, sizes"
@size-change="sizeChange"
:current-page="formInline.page"
:page-sizes="[5, 10, 20, 30, 40, 50, 100]"
:page-size="formInline.size"
v-if="pagerShow"
@current-change="pageChange">
</el-pagination>
- data
formInline: {
time: dateSel,
keyWord: '',
userName: '',
page: 0,
size: 5,
sort:"isHaveAdopted,asc"
},
//完整信息
knowledgeSearchData: [],
//表格展示信息
knowledgeTableData: [],
detailsData: [],
//分页
loading: false,
total: 0,
pagerShow : true,
sort:"id,desc"
- 方法
//排序
sortChange(data){
if (data.order === "descending") {
this.formInline.sort = data.prop + ",desc";
} else if (data.order === "ascending") {
this.formInline.sort = data.prop + ",asc";
}
this.pagerShow = false;
this.loading = true;
this.getKnowledgeTableData();
},
//第几页
pageChange(e) {
this.formInline.page = e - 1
this.pagerShow = false;
this.loading = true;
this.getKnowledgeTableData()
},
//每页多少条
sizeChange(e) {
this.formInline.page = 0
this.formInline.size = e
this.pagerShow = false;
this.loading = true;
this.getKnowledgeTableData()
},
- 得到分页后的表格信息展示
//请求参数
initParams(params){
params.startTime = this.formInline.time[0];
params.endTime = this.formInline.time[1];
params.keyWord = this.formInline.keyWord;
params.userName = this.formInline.userName;
params.page = this.formInline.page;
params.size = this.formInline.size;
params.sort = this.formInline.sort;
},
getKnowledgeTableData(){
var params = {}
this.initParams(params);
axios.post('/api/knowledgeStatistics/knowledgeSearch', params)
.then(function (res) {
//完整信息
this.app.knowledgeSearchData = []
this.app.knowledgeSearchData = res.data
//表格展示信息
this.app.knowledgeTableData = []
console.log(res.data)
//需要取后端传回来的总条数
this.app.total = res.data[0].totalHits;
for (var i = 0; i < res.data.length; i++) {
var map = {
"userText": res.data[i].userText,
"isHaveAdopted": res.data[i].isHaveAdopted,
"isHavePushed": res.data[i].isHavePushed,
"isHaveUseless": res.data[i].isHaveUseless,
"userName": res.data[i].userName
}
this.app.knowledgeTableData.push(map);
}
//分页
setTimeout(() => {
this.app.$nextTick(() => {
this.app.formInline.page = this.app.formInline.page + 1;
this.app.pagerShow = true
this.app.loading = false
})
}, 170)
})
.catch(function (error) {
console.log(error);
});
},
- 每次重新查询分页条件恢复默认
onSubmit(){
this.formInline.page = 0
this.formInline.size = 5
this.getKnowledgeTableData();
},