[ PageHelper + PrimeVue ] 实现后端分页 仅此一篇

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));
    }