<b-pagination style="margin:1em 0" v-model="currentPage" :total-rows="totalRows" :per-page="perPage" :change="換頁()"></b-pagination>
<b-table id="b-table" :per-page="perPage" :current-page="currentPage" head-variant="dark" v-grid fixed sticky-header striped hover :items="gridData" :fields="fields" :filter="filter" v-on:filtered="onFiltered">
data() {
return {
perPage: 100,
currentPage: 1,
totalRows:0, // 取得資料後更新
methods: {
換頁() {
// 每次換頁時自動捲到最上面(若有異動資料也會觸發,必須另外用變數記錄目前是第幾頁來決定是否置頂)
if (this.currentPage != this.prePage) {
$('#b-table').parent().scrollTop(0);
this.prePage = this.currentPage;
}
},
onFiltered(filteredItems) { // 為了filter 可以跨頁正確運作
this.totalRows = filteredItems.length;
this.currentPage = 1;
},