常用元件-實作分頁的方法

Posted on | In

壹、Vue 版本 - computed + 取餘數法

使用 computed 將每筆資料在陣列中全都做出來，在使用分頁切換去讀取個個物件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
data:{
  dataArr: []; // AJAX 資料已經存進來
  currentPage: 0;
}

//使用 computed 做分頁

computed: {
  filterDataArr() {
    cosnt vm = this;
    const newArr= [];
    vm.dataArr.forEach((item,index) => {
      if(index % 10 === 0){ // % 10 代表每一個分頁有 10 筆的資料
        newArr.push([]);  // 假設資料有 100 筆，就會做出 10 個空陣列來存放每一頁的資料
      } 
      const page = parseInt(index / 10); 
      // 用來計算有幾頁，假如是 0~9筆的資料，他就會存放在 newArr[0] 裡面
      newArr[page].push(item)
    }
    return newArr
  }
}

因此，就可以在 html 裡面放入相對應的資料

1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- 網頁呈現資料 -->
<ul v-for='item in filterDataArr[currentPage]'>
  <li>名字: {{ item.name }}</li>
  <li>電話: {{ item.phone }}</li>
</ul>


<!--分頁-->
<li class="page-item" 
    :class="{'active': currentPage = page-1}" 
    v-for="page in filterDataArr.length">
  <a class="page-link" @click.prevent="currentPage = page-1">{{ page }}</a>
</li>

貳、Vue 版本 - 使用 filter

透過 filter 回傳的資料，每次過濾不同分頁的資料

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
data:{
  data: []; // AJAX 資料已經存進來
  currentPage: 0;
  pageContent: [],//過濾後存放資料的地方
  page: 0,
}

created() {
  const vm = this
  vm.page = data.length/10; // 計算出這筆資料有幾頁
}

//按下頁碼切換數字
changePage (page = 1) { // 頁數預設是在第一頁
  const vm = this
  vm.currentPage = page
  vm.pageContent = vm.fbContent.filter((item, index) => {
    return index < page * 10 && index >= (page - 1) * 10 
    // 如果是第一頁就回傳 0~9 筆的資料
    // 第二頁就是 10~19 筆的資料 
  })
}

HTML 部分

1
2
3
4
5
6
7
8
9
<!-- 網頁呈現資料 -->
<ul v-for='item in pageContent'>
  <li>名字: {{ item.name }}</li>
  <li>電話: {{ item.phone }}</li>
</ul>
<!-- 頁數分頁 -->
<li class="page-item" :class="{'active':item === currentPage}" v-for="item in page" :key="item">
  <a class="page-link" href="#" @click.prevent="changePage(item)">{{ item }}</a>
</li>
0%