ネットで検索して見つかるページネーションは、Vue2で使えるものが多い。
今回は、Vue3で使えるページネーションを探してみました。
vuejs-paginate-next
Vue3に対応していて、GitHubのウォッチ数が多いページネーションとして「vue-paginate-next」が見つかりました。
使い方が丁寧に書かれていて、使いやすそうなページネーションです。
インストール
インストール環境
今回は、以下の環境に「vue-paginate-next」をインストールしました。
| ソフトウェア | バージョン |
|---|---|
| PHP | 8.2.6 |
| Laravel | 10.13.5 |
| Vue.js | 3.2.37 |
インストール手順
「vue-paginate-next」のインストール手順です。
npm install vuejs-paginate-next --saveLaravelのプロジェクトで「vue-paginate-next」を使えるようにします。
/resources/js/app.js を編集します。
import './bootstrap';
import { createApp } from 'vue';
const app = createApp({});
import ExampleComponent from './components/ExampleComponent.vue';
app.component('example-component', ExampleComponent);
import Paginate from 'vuejs-paginate-next';
app.component('paginate', Paginate);
app.mount('#app');ページネーション表示
Controller（コントローラー）
コントローラーからビューにデータを返します。
一度に返すデータを「3」としています。
GETで渡されるパラメーターpageにより、対象のページを指定しています。
<?php
namespace App\Http\Controllers;
use App\Models\Todo;
use Illuminate\Http\Request;
class TodoController extends Controller
{
public function getTodos(Request $request)
{
return Todo::paginate(3);
}
}paginateにより、Todoのデータだけでなく、ページネーションのデータもビューに返されます。
ビュー側では、現在のページ（current_page）と最終ページ（last_page）を使います。
View（ビュー）
ページネーションを表示させる場合には、以下のようなコードを書けばOKです。
/resources/js/components/ExampleComponent.vue を編集しています。
<template>
<table class="table table-striped w-auto">
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>isComplete</th>
</tr>
</thead>
<tbody>
<tr v-for="todo in todos" :key="todo.id">
<td>{{todo.id}}</td>
<td>{{todo.name}}</td>
<td>{{todo.isComplete}}</td>
</tr>
</tbody>
</table>
<paginate
v-model="currentPage"
:page-count="lastPage"
:click-handler="clickCallback"
:prev-text="'<'"
:next-text="'>'"
:container-class="'pagination'"
:page-class="'page-item'"
>
</paginate>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.');
this.getTodos(1);
},
data() {
return {
lastPage: 1,
currentPage: 1,
todos: []
}
},
methods: {
clickCallback(num) {
this.getTodos(Number(num));
},
getTodos(page) {
this.currentPage = page;
this.todos = [];
axios.get('/todo?page=' + page)
.then(res => {
console.log(res.data);
this.lastPage = res.data['last_page'];
res.data.data.forEach(d =>{
this.todos.push({
id: d['id'],
name: d['name'],
isComplete: d['isComplete']
});
});
})
.catch(err => {
console.log(err);
});
},
},
}
</script>ExampleComponent.vue を View から呼び出します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>vue-paginate</title>
<!-- Scripts -->
@vite(['resources/sass/app.scss', 'resources/js/app.js'])
</head>
<body>
<div id="app">
<example-component></example-component>
</div>
</body>
</html>ビルドします。
npm run buildサイトにアクセスした結果、ページネーションが表示できました！
ページネーションのボタンをクリックすることで、ページを移動できます。
ページネーションを使いたい場合、Bootstrapを使う、自分で作る...いろいろな方法がありますが、「vue-paginate-next」を使うことで、やりたいことが簡単に実現できます。
Vue3でページネーションを使いたい場合、「vue-paginate-next」を採用してみてはどうでしょうか。
コメント