日常开发之数据分页之前端展示的三种思路

两种实现方式：前端、后端

三种思路

• 前端绑定list实现分页
• sql实现数据分页
• 如果调用接口查询出来的数据，无法直接操作sql，那么可以考虑查到数据后，自己排序，再截取list获取到当页查询的分页数据

 

前端绑定list实现分页代码：

返回前端的数据源：  streamLineList

<div class="center">
                    <el-table :data="streamLineList" border style="width: 100%"
                              :default-sort="{prop: 'outPut', order: 'descending'}" @sort-change="sortChange">
                        <el-table-column prop="name" :label="t('sline.line.column.name')" align="center">
                        </el-table-column>
                        <el-table-column prop="specName" show-overflow-tooltip :label="t('sline.line.column.specName')"
                                         align="center">
                        </el-table-column>
                        <el-table-column prop="vplName" show-overflow-tooltip :label="t('sline.line.column.vplName')"
                                         align="center">
                        </el-table-column>
                        <el-table-column prop="tempName" show-overflow-tooltip :label="t('sline.line.column.temName')"
                                         align="center">
                        </el-table-column>
                        <el-table-column prop="status" :label="t('sline.line.column.status')" align="center"
                                         :formatter="formatStatus">
                        </el-table-column>
                        <el-table-column sortable="custom" prop="outPut" :sort-orders="['ascending', 'descending']"
                                         :label="t('sline.line.column.outPut')"
                                         align="center">
                        </el-table-column>
                    </el-table>
                    <div style="margin-top: 10px;">
                        <el-pagination @current-change="handlePageChange" :current-page.sync="currentPage"
                                       layout="total, prev, pager, next, jumper" :total="total" :page-size="10">
                        </el-pagination>
                    </div>
                </div>

 

 

sql实现数据分页

后端：limit分页公式：curPage是当前第几页；pageSize是一页多少条记录

select * from student limit(curPage-1)*pageSize,pageSize;
//栗子
select * from orders_history where type=8 limit 100,100;
select * from orders_history where type=8 limit 1000,100;

 

 

接口返回list，截取list获取到当页查询的分页数据

后端：

if (sLineTempOutPutParam.getOutPutDesc()) {
            sLineTempOutPutList = sLineTempOutPutList.stream()
                    .sorted(Comparator.comparing(SLineTempOutPut::getOutPut).reversed())
                    .collect(Collectors.toList());
        } else {
            sLineTempOutPutList = sLineTempOutPutList.stream()
                    .sorted(Comparator.comparing(SLineTempOutPut::getOutPut))
                    .collect(Collectors.toList());
        }
        // 对计算好的list进行分页
        Integer page = sLineTempOutPutParam.getPage() != null ? sLineTempOutPutParam.getPage() : 1;
        Integer size = sLineTempOutPutParam.getSize() != null ? sLineTempOutPutParam.getSize() : 10;
        int firstIndex = (page - 1) * size;
        int lastIndex = Math.min(page * size, sLineTempOutPutList.size());
        PageInfo<SLineTempOutPut> pageInfo = new PageInfo<>(sLineTempOutPutList.subList(firstIndex, lastIndex));
        pageInfo.setTotal(sLineTempOutPutList.size());
        return pageInfo;