vue.js 純前端分頁(組件)

by cactus77kiki

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">


<div id="vapp" v-cloak>
  <div style="text-align: center;"><h3>vue.js 分頁組件</h3></div>  
  <paging-ele :countlistval="[]" :datalistval="alldata" :refeshalldata="regetall" @passingmethod="getpagedata">    
  </paging-ele>
  <br/>
  
  <ul>
    <li v-for="(row, index) in datalist">
      編號：{{row.id}} / 分數1：{{row.score1}} / 分數2：{{row.score2}} / 分數3：{{row.score3}} / 分數4：{{row.score4}} / 分數5：{{row.score5}}
    </li>
  </ul>
</div>

CSS

[v-cloak] {
display: none;
}
body {
    padding-top: 10px;
    padding-bottom: 30px;
    font-family: 微軟正黑體, Verdana, Arial;
}
.pagecontainer {
    font-size: 1em;
    text-align: center;
    margin: 5px;
}

.input-xs {
    height: 23px;
    line-height: 1.5;
    font-size: 12px;
    padding: 1px 5px;
    border-radius: 3px;
}

.pagecontainer select {
    /*color: #cc0000;*/  /* #26A3CD */
}

.pagecontainer span.redtext {
    color: #cc0000;
}

.pagecontainer span.spanlink {
    cursor: pointer;
    text-decoration: none;
    color: black;
}

    .pagecontainer span.spanlink:hover {
        color: #cc0000;
    }
    
.btnpage {
  /*background-color: DodgerBlue;#9AD8ED;#8ADAF2;#B2BBBE*/
  background-color: #8ADAF2;
  border: none;
  color: white;
  padding: 5px 10px;
  font-size: 13px;
  cursor: pointer;
  border-radius: 3px;
  font-family: 微軟正黑體, Verdana, Arial;
}

/* Darker background on mouse-over */
.btnpage:hover:enabled {
  background-color: #5BC3ED;/*RoyalBlue;#5BC3ED;#919292*/
}

JavaScript

/*
ref: https://jsfiddle.net/cactus77kiki/o4n0exkL/  (分頁style test)
*/
Vue.component('paging-ele', {      
    props:{
    	countlistval:{type: Array},	//資料筆數清單
      datalistval:{type: Array},	//總資料 
      refeshalldata:{type: Function},	//重新整理資料
    },     
    data:function(){
    	return{
      	rowlist: this.countlistval.length == 0 ? [15,20,30,40,50] : this.countlistval,//筆數清單
        selectedrow: 1,	//每頁資料筆數
        selectedpage: 1,	//選取的頁碼
        limitpage: 1,	//控制 頁碼選單或頁碼input 出現何者
      }
    },
    computed: {
    	totalrow: function(){	//總筆數    		
      	return this.datalistval.length;
    	},
      totalpage: function(){	//總頁數
    		return Math.ceil(this.totalrow/this.selectedrow);
    	},
      startseq: function(){	//UI資料起始筆數(首頁=>seq=1)
    		return (this.selectedrow)*(this.selectedpage-1)+1;
    	},
    	endseq: function(){	//UI資料結束筆數
    		return (this.selectedrow)*(this.selectedpage) > this.totalrow ? this.totalrow : (this.selectedrow)*(this.selectedpage);
    	},
      pagelist: function(){	//UI資料
      	var startseq = this.startseq;
      	var endseq = this.endseq;
      	var result=[];
      	for(var i = startseq;i<=endseq;i++){
        	 result.push(this.datalistval[i-1]);
      	}      
				return result;      
    	},
      canback: function () {      //[上一頁]是否work         
        if (this.totalpage == 1 || this.selectedpage == 1)	return false;
        else return true;
      },
      cannext: function () {  //[下一頁]是否work 
        if (this.totalpage == 1 || this.selectedpage == this.totalpage)	return false;
        else return true;
      },                      
    }, 
    template:
        `<div class="pagecontainer">
        	<div>
          	<button class="btnpage" title="重新整理" v-on:click="refreshdata()"><i class="fa fa-refresh"></i> </button>&nbsp;&nbsp;
            共&nbsp;<span style="color:#0D4FC2;">{{totalrow}}</span>&nbsp;筆資料&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <button...