Membuat Paginate Di Laravel,Vue Dengan Inertia JS

Melanjutkan seri artikel mengenai inertia js dimana pada artikel sebelumnya kita sudah membahas bagaimana menampilkan data ke views bagi anda yang belum membacanya silahkan klik disini, dan bagi teman-teman yang belum mengenal inertia js silahkan baca disini.

Pada case ini kita akan membuat manual paginate silahkan buka file Providers lalu double klik file AppServiceProvider.php dan tambahkan coding sbb :

Use Statement yang dibutuhkan sbb :

use Illuminate\Pagination\UrlWindow;
use Illuminate\Support\Collection;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Request;
use Illuminate\Support\ServiceProvider;
use Illuminate\Pagination\LengthAwarePaginator;
use Illuminate\Support\Facades\Session;
use Inertia\Inertia;

Dan Tambahkan Function registerLengthAwarePaginator sbb :

private function registerLengthAwarePaginator()
    {
        $this->app->bind(LengthAwarePaginator::class, function ($app, $values) {
            return new class(...array_values($values)) extends LengthAwarePaginator {
                public function only(...$attributes)
                {
                    return $this->transform(function ($item) use ($attributes) {
                        return $item->only($attributes);
                    });
                }
                public function transform($callback)
                {
                    $this->items->transform($callback);
                    return $this;
                }
                public function toArray()
                {
                    return [
                        'data' => $this->items->toArray(),
                        'links' => $this->links(),
                    ];
                }
                public function links($view = null, $data = [])
                {
                    $this->appends(Request::all());
                    $window = UrlWindow::make($this);
                    $elements = array_filter([
                        $window['first'],
                        is_array($window['slider']) ? '...' : null,
                        $window['slider'],
                        is_array($window['last']) ? '...' : null,
                        $window['last'],
                    ]);
                    return Collection::make($elements)->flatMap(function ($item) {
                        if (is_array($item)) {
                            return Collection::make($item)->map(function ($url, $page) {
                                return [
                                    'url' => $url,
                                    'label' => $page,
                                    'active' => $this->currentPage() === $page,
                                ];
                            });
                        } else {
                            return [
                                [
                                    'url' => null,
                                    'label' => '...',
                                    'active' => false,
                                ],
                            ];
                        }
                    })->prepend([
                        'url' => $this->previousPageUrl(),
                        'label' => 'Previous',
                        'active' => false,
                    ])->push([
                        'url' => $this->nextPageUrl(),
                        'label' => 'Next',
                        'active' => false,
                    ]);
                }
            };
        });
    }

Dan jangan lupa di register function diatas sbb :

public function register()
    {
        $this->registerLengthAwarePaginator();
    }

Setelah itu kita buat sebuah views dan kita berinama paginate.vue, dikarenakan component paginate ini digunakan di views lainnya maka baiknya kita tambahkan di dalam folder shared saja dan masukkan codingnya sbb :

<template>
    <nav aria-label="Page navigation example" v-if="showPagination">
        <ul class="pagination">
            <li class="page-item" v-for="(link, key) in links" :key="key" v-bind:class="isActive(link)">
                <inertia-link class="page-link" :href="link.url" v-if="link.url">{{ link.label }}</inertia-link>
                <a class="page-link" href="#" v-else @click.prevent="handleNoLink">{{ link.label }}</a>
            </li>
        </ul>
    </nav>
</template>
<script>
    export default {
        props: {
            links: Array,
        },
        computed: {
            showPagination() {
                return this.links.length > 3
            }
        },
        methods: {
            isActive(link) {
                return (link.active === true) ? 'active' : 'normal'
            },
            handleNoLink() {
                return false
            }
        }
    }
</script>

Pagination akan kita tampilkan jika panjang linksnya > 3 mari kita lihat panjang links dari data yang kita miliki sbb :

dan untuk coding controller silahkan tambahkan baris sbb :

public function list()
    {
        $lists = Customer::paginate(7);
        return Inertia::render('Customer/List', [
            'lists' => $lists
        ]);
    }

Pada function list kita meload data customer dan data yang tampil kita berikan paginate 7 record per paginatenya dan kita render datanya kedalam views yang berada di folder customer dan kita beri nama List.vue

Berikut coding Lisit.vue :

<template>
    <div>
        <Layout>
            <div class="container-fluid">
                    <h2> List Customer </h2>
            <table class="table table-bordered bg-white">
                <tr>
                    <th> No. </th>
                    <th>Nama</th>
                    <th>Email</th>
                </tr>
                <tr v-for="(list, index) in lists.data" :key="list.id">
                    <td> {{ index + 1}} </td>
                    <td>{{ list.nama }}</td>
                    <td>{{ list.email }}</td>
                </tr>
            </table> 
                <Pagination :links="lists.links"></Pagination>    
            </div>
        </Layout>
    </div>
</template>
<script>
import Layout from './../../Shared/Layout' //Import Layouts
import Pagination from './../../Shared/Pagination'
export default {
    props : ['lists'],
    components : {
        Layout,
        Pagination,
    },
}
</script>

Pada views List kita melakukan import Pagintation dan kita melakukan bind links dimana isinya di dapat dari hasil props lists.links

Dan jangan lupa tambahkan sebuah Route Web agar aplikasi dapat berjalan sbb :

Route::get('/customer/list', 'CustomerController@list')
        ->name('customer.list');

Kesimpulan :

Pada Artikel ini kita sudah belajar cara menambahkan paginate pada laravel,vue dengan inertia js, Menurut saya Inertia js sangat membantu kita dalam membangun Web SPA tanpa harus membangun backend sehingga kita dapat dengan cepat menyelesaikan projects webapps.

Bagaimana pendapat anda mengenai Inertia JS ? apakah anda tertarik menggunakan Inertia JS Pada Projects Anda ? atau bahakan anda sudah ada pengalaman di production dengan Inertia JS ? Share ya pengalaman anda di kolom komentar