这不仅仅是前端查出全部数据,然后做假分页和排序,而是结合SpringData Jpa 以及其封装的进行真分页以及排序后查询,每次只从数据库动态获取指定条数和指定页码的数据,解决了全表查询数据量太大的问题。
首先是前端Vue的部分
写一个table加pagination并且绑定必要的方法
<div class="elshowtablediv">
<div>
<el-table
class="eltable1"
:data="UsertableData"
:header-cell-style="{background:'#F2F9FF', 'text-align':'center'}"
:cell-style="{'text-align':'center'}"
@sort-change="changeUsertableSort"
style="width: 85vw"
border>
<el-table-column
prop="id"
label="编号"
width="180"
:sortable="'custom'">
</el-table-column>
<el-table-column
prop="username"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="usernumber"
label="账号">
</el-table-column>
<el-table-column
prop="password"
label="密码">
</el-table-column>
<el-table-column
prop="userrole"
label="身份类型">
</el-table-column>
<el-table-column label="操作" width="150">
<template slot-scope="scope">
<el-button
circle
size="mini"
type="primary"
icon="el-icon-edit"
@click="handleEdit(scope.row)"></el-button>
<el-button
circle
size="mini"
type="danger"
icon="el-icon-delete"