PrimeVue的前端分页组件平时使用较少,本篇实现了后端PageHelper 分页提供数据,前端 PrimeVue组件 的 DataTable 接收数据,分页 采用懒加载的方式展示数据.
前端标签代码: DataTable接收数据,以及分页标签模板
<DataTable :value="customers" class="p-datatable-customers"
lazy paginator :rows="5" ref="dt" dataKey="id"
paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
:totalRecords="totalRecords" :loading="loading"
@page="onPage($event)">
<column selectionMode="multiple" headerStyle="width: 3rem" />
<column field="factoryName" header="厂商" header-style="font-weight: bold" />
<column field="productName" header="产品" header-style="font-weight: bold" />
<column field="docuName" header="命令" header-style="font-weight: bold" />
<column field="script" header="脚本" header-style="font-weight: bold" />
<column field="remark" header="备注" header-style="font-weight: bold" />
</DataTable>
前端Script代码: 定义懒加载请求数据lazyParams,以及loadLazyData(),onPage(event)请求方法
<script>
export default {
data() {
return {
customers: null,
loading: false,
totalRecords: 0,
lazyParams: {},
}
},
mounted() {
this.loading = true;
this.lazyParams = {
rows: this.$refs.dt.rows,
page: 0,
};
this.loadLazyData();
},
methods: {
loadLazyData() {
this.loading = true;
setTimeout(() => {
this.$APIPOST('/telecontrol/script/get_page', JSON.stringify(this.lazyParams)).then((res) => {
this.customers = res.data.list;
this.totalRecords = res.data.totalRecords;
this.loading = false;
});
}, Math.random() * 100 + 200);
},
onPage(event) {
this.lazyParams = event;
this.loadLazyData();
},
}
}
</script>
后端实现:定义分页对象jsonPage, 含PageInfo对象转JsonPage对象方法
import com.github.pagehelper.PageInfo;
import lombok.Data;
import java.io.Serializable;
import java.util.List;
/**
* @Description: 分页对象
* @Author: mc 2023/3/19 10:27
*/
@Data
public class JsonPage<T> implements Serializable {
/**
* 页码
*/
private Integer page;
/**
* 每页条数
*/
private Integer rows;
/**
* 总条数
*/
private Long totalRecords;
/**
* 分页查询结果
*/
private List<T> list;
/**
* 构建分页对象
* @param pageInfo
* @param <T>
* @return
*/
public static <T> JsonPage<T> restPage(PageInfo<T> pageInfo) {
JsonPage<T> result = new JsonPage<>();
result.setTotalRecords(pageInfo.getTotal());
result.setList(pageInfo.getList());
return result;
}
}
后端实现:Service调用方法,查询数据,数据重构,返回Controller层,
/**
* 分页查询脚本档案
* @return 分页信息
*/
public JsonPage<Script> getPage(Integer page, Integer rows) {
PageHelper.startPage(page + 1, rows);
List<Script> list = scriptMapper.selectList(null);
return JsonPage.restPage(new PageInfo<>(list));
}