后台管理系統中的前端分頁和后端分頁

前端分頁

template:

<div class="pagination">
            <el-pagination @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[15]" :page-size="15" layout="total, sizes, prev, pager, next, jumper" :total="totalCount">
            </el-pagination>
</div>

data:

totalCount:0,

currentPage:1,

totalCount存放總數，currentPage為當前頁

methods:

      search:function(){
            var self = this;
            self.$axios.post(self.$global.host+'/api',{
                a:self.a,
            }).then((response) => {
                if(response.data.code=="000000"){
                    self.oldData = response.data.result;
                    self.totalCount = response.data.result.length;
                    self.showTable();
                }else{
                    self.$message({
                        message: response.data.message,
                        type: 'warning'
                    });
                    return false;
                }
            }, (response) => {
                    self.$message({
                        message: response.data.message,
                        type: 'warning'
                    });  
                    return false;
            })
      },

oldData存放所有數據

     showTable:function(){ this.tableData = this.oldData.slice((this.currentPage-1)*15,this.currentPage*15); }, handleCurrentChange(currentPage){ this.currentPage = currentPage; this.showTable(); },

因為我想15條/頁，所以用15為基數分割