技術標籤：SSM前端網頁

目錄

• 後端
• 前端

後端

//	num為當前頁 size為每頁個數
    public Page<codesection> pageAll(int num, int size) {
    //第一部分 實現分頁查詢
        Pageable pageable = PageRequest.of(num,size);
        Page<codesection> codesections = codesectionDao.findAll(pageable);
        //第二部分 將page 轉成list 新增資料
        List<
 
codesection> codesectionslist = codesections.getContent();
        for (int i = 0; i < codesectionslist.size(); i++) {
            codesectionslist.get(i).setFactoryname(factoryinfoDao.findByFactoryid(codesectionslist.get(i).getFactoryid()).getFactoryname());
            codesectionslist.get(i)
 
.setLinename(lineinfoDao.findByLineid(codesectionslist.get(i).getLineid()).getLinename());
        }
        //第三部分將 list 轉成 page 並返回
        // 當前頁第一條資料在List中的位置
        int start = 0;
        // 當前頁最後一條資料在List中的位置
        int end = codesectionslist.size();
        // 配置分頁資料
        Page<codesection> klassPage =
 
 new PageImpl<codesection>(codesectionslist.subList(start, end), pageable, codesections.getTotalElements());
        return klassPage;
    }

前端

<div class="pagination">
  <el-pagination
    background
    layout="total, prev, pager, next"
    :current-page="query.pageIndex"
    :page-size="query.pageSize"
    :total="pageTotal"
    @current-change="handleCurrentChange"
    style="position: fixed;bottom: 20px;"
  ></el-pagination>
</div>

data() {
   return {
     query:{
       pageIndex:0,
       pageSize:9,
     },
     pageTotal: 0,
   }
 },
created() {
  this.getData(this.query.pageIndex,this.query.pageSize)
},
getData(currentPage,pageSize){
  this.axios({
    method:'GET',
    url:'/page/'+currentPage+'/'+pageSize,
  })
    .then(res =>{
      console.log(res)
      this.codes = res.data.content;
      this.pageTotal = res.data.totalElements;
    })
},
handleCurrentChange(value){
  this.query.pageIndex = value;//獲得當前頁碼
  this.getData(this.query.pageIndex-1,this.query.pageSize);
}