1. 程式人生 > >iview的table+page分頁

iview的table+page分頁

<Page :total="pageTotal" :current="pageNum" :page-size="pageSize" 
  show-elevator  show-total placement="top" @on-change="handlePage" 
  >

</Page>

data裡資料

        pageTotal: 10,  //資料總數
        pageNum: 1,  //初始頁
        pageSize: 3,  //每頁條數
        dataArr :[],   //頁面顯示的陣列

一、沒有後臺情況下的分頁

1、把從後臺資料整理成分頁需要的格式

          var that = this;
            axios({ 
                url:"http://192.168.0.134:8080/queryPastHousepj",
                // params:{projectname:that.proname,projectnum:that.pronum}
            })
            .then(function(data){
                console.log(data.data)       
                var arr = data.data
                 for(var i in arr){                      
                      var obj={name:arr[i].producttype,diaoyan:arr[i].projectname,pic:arr[i].projectname}
                       // console.log(obj)
                       that.data1.push(obj)                                          
                 }
                   that.pageTotal = that.data1.length;
                  //console.log(that.data1.length)
                        var _start = ( that.pageNum - 1 ) * that.pageSize;  //pageNum 第幾頁  pageSize:每頁幾條資料
                        var _end = that.pageNum * that.pageSize;
                        that.dataArr = that.data1.slice(_start,_end);
                       
            })

2、分頁函式的處理

         //分頁
         handlePage(value){
           console.log(value)
           this.pageNum = value;
           var _start = ( value - 1 ) * this.pageSize;
           var _end = value * this.pageSize;
           this.dataArr = this.data1 .slice(_start,_end);
       },

 二、後臺配合情況下的分頁

         var that = this;
          axios({
                    url:"http://192.168.0.134:8080/queryByLog",
                    params:{page:1}
                })
                .then(function(data){
                     console.log(data.data)   
                      that.pageTotal = data.data.totalCount;
                    //  that.pageNum = data.data.totalCount; //初始頁
                     that.pageSize = data.data.limit; //每頁條數

                     var arr = data.data.list;
                   
                            that.shuju = arr
                                       
                     that.dataArr = that.shuju
                     //console.log(that.shuju)
                       
                })
       //分頁

         handlePage(value){
           console.log(value)
           var that = this;
           axios({
                    url:"http://192.168.0.134:8080/queryByLog",
                    params:{page:value}
                })
                .then(function(data){
                     console.log(data.data)   
                      that.pageTotal = data.data.totalCount;
                    //  that.pageNum = data.data.totalCount; //初始頁
                     that.pageSize = data.data.limit; //每頁條數

                     var arr = data.data.list;
                       that.shuju = arr
                      console.log(arr)
                     for(var i in arr){
                       
                            that.shuju = arr
                       
                     }
                   
                     that.dataArr = that.shuju
                    
                })

       },

 

ok大功告成,簡不簡單、開不開心?