Pagination dalam InertiaJS

March 21, 2025 Mahatma Mahardhika

Pagination dalam InertiaJS

Daftar Isi

Pengenalan Pagination dengan InertiaJS
Konsep Dasar Pagination
Implementasi Pagination di Backend
- Pagination dengan Laravel
- Pengaturan Query Pagination
Implementasi Pagination di Frontend
Kustomisasi Pagination
- Styling Pagination
- Logika Kustom
Optimasi Performa Pagination
Praktik Terbaik
Kesimpulan

Pengenalan Pagination dengan InertiaJS

InertiaJS telah merevolusi cara kita membangun aplikasi web modern dengan menggabungkan kenyamanan traditional server-side rendering dengan kekuatan Single Page Application (SPA). Salah satu komponen penting dalam pengembangan aplikasi web adalah pagination, yang memungkinkan pengguna untuk menjelajahi sejumlah besar data dengan cara yang terorganisir.

Pagination dalam InertiaJS menjembatani kesenjangan antara backend dan frontend dengan mulus, memungkinkan pengembang untuk memanfaatkan kemampuan pagination bawaan dari framework backend (seperti Laravel) sambil menampilkan data dengan komponen frontend (Vue.js atau React) yang interaktif dan responsif.

Konsep Dasar Pagination

Sebelum kita mendalami implementasi teknis, mari kita pahami konsep dasar pagination:

Page Size: Jumlah item yang ditampilkan per halaman
Current Page: Halaman yang sedang aktif dilihat oleh pengguna
Total Items: Jumlah total item dalam dataset
Total Pages: Total halaman yang diperlukan untuk menampilkan semua item
Navigation Links: Kontrol untuk berpindah antar halaman

Dalam konteks InertiaJS, pagination melibatkan pengiriman data yang dipaginasi dari server ke klien menggunakan mekanisme prop InertiaJS, lalu menampilkan data dan kontrol halaman menggunakan komponen frontend.

Implementasi Pagination di Backend

Pagination dengan Laravel

Laravel, sebagai backend yang paling umum digunakan dengan InertiaJS, menyediakan dukungan pagination yang sangat baik. Berikut adalah cara mengimplementasikannya:

// PostController.php
public function index()
{
    $posts = Post::latest()->paginate(10);
    
    return Inertia::render('Posts/Index', [
        'posts' => $posts
    ]);
}

Metode paginate() secara otomatis mengatur pagination dengan parameter berikut:

Jumlah item per halaman (dalam contoh ini 10)
Link ke halaman sebelumnya dan berikutnya
Total item dan halaman
Halaman saat ini

Laravel akan otomatis mendeteksi parameter page dari query string URL dan mengembalikan data yang sesuai.

Pengaturan Query Pagination

Kita dapat mengkustomisasi query pagination dengan berbagai cara:

// Pagination dengan kondisi where
$posts = Post::where('is_published', true)
            ->orderBy('created_at', 'desc')
            ->paginate(15);

// Pagination dengan eager loading relation
$posts = Post::with(['author', 'comments'])
            ->paginate(10);

// Pagination dengan penghitungan relasi
$posts = Post::withCount('comments')
            ->having('comments_count', '>', 5)
            ->paginate(10);

// Pagination sederhana (tanpa total count untuk performa lebih baik)
$posts = Post::latest()->simplePaginate(10);

Tip: Untuk koleksi data yang sangat besar, gunakan simplePaginate() daripada paginate() untuk menghindari query COUNT yang berat.

Implementasi Pagination di Frontend

Menampilkan Pagination Links

Ketika menggunakan Laravel dengan InertiaJS, data pagination yang dikirim ke frontend memiliki struktur berikut:

{
  "data": [ /* item-item halaman saat ini */ ],
  "links": [
    { "url": "/?page=1", "label": "«", "active": false },
    { "url": "/?page=1", "label": "1", "active": false },
    { "url": "/?page=2", "label": "2", "active": true },
    { "url": "/?page=3", "label": "3", "active": false },
    { "url": "/?page=3", "label": "»", "active": false }
  ],
  "current_page": 2,
  "from": 11,
  "last_page": 3,
  "path": "/",
  "per_page": 10,
  "to": 20,
  "total": 26
}

Kita dapat menggunakan informasi ini untuk membangun komponen pagination yang interaktif.

Komponen Pagination dengan Vue

Berikut adalah contoh komponen pagination dasar dengan Vue:

<template>
  <div class="posts-container">
    <!-- Tampilkan daftar post -->
    <div v-for="post in posts.data" :key="post.id" class="post">
      <h2>{{ post.title }}</h2>
      <p>{{ post.excerpt }}</p>
    </div>
    
    <!-- Tampilkan pagination links -->
    <div class="pagination">
      <template v-for="(link, i) in posts.links" :key="i">
        <inertia-link
          v-if="link.url"
          :href="link.url"
          class="pagination-link"
          :class="{ 'active': link.active }"
          v-html="link.label"
        />
        <span v-else class="pagination-link disabled" v-html="link.label" />
      </template>
    </div>
    
    <div class="pagination-info">
      Menampilkan {{ posts.from }} hingga {{ posts.to }} dari {{ posts.total }} item
    </div>
  </div>
</template>

<script>
export default {
  props: {
    posts: Object
  }
}
</script>

Dalam contoh di atas, kita menggunakan inertia-link untuk membuat link pagination yang akan menavigasi tanpa reload halaman penuh. InertiaJS akan otomatis menangani pemuatan data yang diperlukan.

Komponen Pagination dengan React

Jika Anda menggunakan React sebagai frontend, berikut adalah contoh implementasinya:

import React from 'react';
import { InertiaLink } from '@inertiajs/inertia-react';

const Posts = ({ posts }) => {
  return (
    <div className="posts-container">
      {/* Tampilkan daftar post */}
      {posts.data.map(post => (
        <div key={post.id} className="post">
          <h2>{post.title}</h2>
          <p>{post.excerpt}</p>
        </div>
      ))}
      
      {/* Tampilkan pagination links */}
      <div className="pagination">
        {posts.links.map((link, i) => (
          
            {link.url ? (
              <InertiaLink
                href={link.url}
                className={`pagination-link ${link.active ? 'active' : ''}`}
                dangerouslySetInnerHTML={{ __html: link.label }}
              />
            ) : (
              <span 
                className="pagination-link disabled"
                dangerouslySetInnerHTML={{ __html: link.label }}
              />
            )}
          
        ))}
      </div>
      
      <div className="pagination-info">
        Menampilkan {posts.from} hingga {posts.to} dari {posts.total} item
      </div>
    </div>
  );
};

export default Posts;

Kustomisasi Pagination

Styling Pagination

Styling pagination links dapat dilakukan dengan CSS biasa. Berikut contoh sederhana:

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
  gap: 0.5rem;
}

.pagination-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.75rem;
  border-radius: 0.25rem;
  background-color: #f3f4f6;
  color: #1f2937;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.2s ease;
}

.pagination-link:hover {
  background-color: #e5e7eb;
}

.pagination-link.active {
  background-color: #3b82f6;
  color: white;
}

.pagination-link.disabled {
  opacity: 0.5;
  pointer-events: none;
}

.pagination-info {
  text-align: center;
  margin-top: 1rem;
  color: #6b7280;
  font-size: 0.875rem;
}

Logika Kustom

Untuk kasus yang lebih kompleks, Anda mungkin ingin membuat komponen pagination kustom:

// Komponen pagination kustom (Vue)
<template>
  <div class="pagination-container">
    <inertia-link 
      :href="previousPageUrl" 
      class="pagination-button"
      :class="{ 'disabled': !hasPreviousPage }"
    >
      <span class="icon"><i class="fas fa-chevron-left"></i></span>
      Sebelumnya
    </inertia-link>
    
    <div class="page-numbers">
      <span v-if="showingStartEllipsis">...</span>
      
      <template v-for="page in visiblePageNumbers" :key="page">
        <inertia-link 
          :href="getPageUrl(page)"
          class="page-number"
          :class="{ 'active': page === currentPage }"
        >
          {{ page }}
        </inertia-link>
      </template>
      
      <span v-if="showingEndEllipsis">...</span>
    </div>
    
    <inertia-link 
      :href="nextPageUrl" 
      class="pagination-button"
      :class="{ 'disabled': !hasNextPage }"
    >
      Selanjutnya
      <span class="icon"><i class="fas fa-chevron-right"></i></span>
    </inertia-link>
  </div>
</template>

<script>
export default {
  props: {
    pagination: Object,
    maxVisiblePages: {
      type: Number,
      default: 5
    }
  },
  
  computed: {
    currentPage() {
      return this.pagination.current_page;
    },
    
    lastPage() {
      return this.pagination.last_page;
    },
    
    hasPreviousPage() {
      return this.currentPage > 1;
    },
    
    hasNextPage() {
      return this.currentPage < this.lastPage;
    },
    
    previousPageUrl() {
      return this.pagination.prev_page_url;
    },
    
    nextPageUrl() {
      return this.pagination.next_page_url;
    },
    
    visiblePageNumbers() {
      const halfVisible = Math.floor(this.maxVisiblePages / 2);
      let start = this.currentPage - halfVisible;
      let end = this.currentPage + halfVisible;
      
      if (start < 1) {
        end = Math.min(end + (1 - start), this.lastPage);
        start = 1;
      }
      
      if (end > this.lastPage) {
        start = Math.max(1, start - (end - this.lastPage));
        end = this.lastPage;
      }
      
      const pages = [];
      for (let i = start; i <= end; i++) {
        pages.push(i);
      }
      return pages;
    },
    
    showingStartEllipsis() {
      return this.visiblePageNumbers[0] > 1;
    },
    
    showingEndEllipsis() {
      return this.visiblePageNumbers[this.visiblePageNumbers.length - 1] < this.lastPage;
    }
  },
  
  methods: {
    getPageUrl(page) {
      const path = this.pagination.path;
      return `${path}?page=${page}`;
    }
  }
}
</script>

Optimasi Performa Pagination

Untuk meningkatkan performa pagination, terutama untuk dataset yang besar, pertimbangkan teknik-teknik berikut:

Gunakan simplePaginate(): Untuk dataset yang sangat besar, gunakan simplePaginate() di Laravel karena ini menghindari query COUNT dan hanya menyediakan link "sebelumnya" dan "selanjutnya".
```
$posts = Post::latest()->simplePaginate(10);
```

Batasi jumlah data yang dikirim: Hanya kirim kolom yang diperlukan untuk tampilan.

$posts = Post::select('id', 'title', 'excerpt', 'created_at')
              ->latest()
              ->paginate(10);

Indeks database: Pastikan kolom yang digunakan untuk ordering dan filtering memiliki indeks untuk mempercepat query.

// Migration
Schema::table('posts', function (Blueprint $table) {
    $table->index('created_at');
    $table->index('is_published');
});

Manfaatkan cache: Untuk data yang jarang berubah, pertimbangkan untuk meng-cache hasil pagination.

$posts = Cache::remember('posts_page_' . request('page', 1), now()->addMinutes(5), function () {
    return Post::latest()->paginate(10);
});

Cursor pagination: Untuk dataset yang sangat besar, cursor pagination lebih efisien (tersedia di Laravel 8+).
```
$posts = Post::latest('id')->cursorPaginate(10);
```

Praktik Terbaik

Berikut beberapa praktik terbaik yang perlu dipertimbangkan ketika mengimplementasikan pagination di InertiaJS:

Konsistensi UI: Jaga konsistensi desain pagination di seluruh aplikasi untuk pengalaman pengguna yang lebih baik.

Preservasi State: Gunakan parameter query untuk filter dan pencarian agar state tetap terjaga saat navigasi pagination.

// Controller
public function index(Request $request)
{
    $query = Post::query();
    
    if ($request->has('search')) {
        $query->where('title', 'like', '%' . $request->search . '%');
    }
    
    if ($request->has('category')) {
        $query->where('category_id', $request->category);
    }
    
    $posts = $query->latest()->paginate(10)->withQueryString();
    
    return Inertia::render('Posts/Index', [
        'posts' => $posts,
        'filters' => $request->only(['search', 'category'])
    ]);
}

Form Submissions: Gunakan preserveState agar filter dan state pagination tetap terjaga setelah submit form.

// Vue Component
<form @submit.prevent="submit">
  <input v-model="form.search" type="text">
  <button type="submit">Search</button>
</form>

<script>
export default {
  data() {
    return {
      form: this.$inertia.form({
        search: this.$page.props.filters.search || ''
      })
    }
  },
  methods: {
    submit() {
      this.form.get(this.route('posts.index'), {
        preserveState: true,
        preserveScroll: true,
        only: ['posts']
      });
    }
  }
}
</script>

URL yang Bersih: Gunakan URL yang SEO-friendly dan mudah dibagikan.

// route di web.php
Route::get('posts/page/{page}', [PostController::class, 'index'])
    ->name('posts.index')
    ->where('page', '[0-9]+');

Lazy Loading Komponen: Untuk aplikasi yang besar, pertimbangkan untuk lazy-load komponen pagination.
```
// Vue lazy loading
const Pagination = () => import('./Pagination.vue');
```

Kesimpulan

Pagination adalah aspek penting dalam pengembangan aplikasi web modern, dan InertiaJS menyediakan cara yang elegan untuk mengimplementasikannya dengan menjembatani framework backend seperti Laravel dengan frontend Vue atau React.

Dengan memahami konsep dasar, implementasi backend dan frontend, serta teknik optimasi yang telah kita bahas, Anda dapat membuat sistem pagination yang efisien, responsif, dan user-friendly untuk aplikasi InertiaJS Anda.

Yang terpenting, manfaatkan kekuatan masing-masing bagian: gunakan kemampuan pagination bawaan Laravel di backend dan kekuatan komponisasi Vue/React di frontend untuk menciptakan pengalaman pengguna yang optimal.

Ingatlah untuk selalu mempertimbangkan performa dan UX dalam setiap keputusan implementasi pagination, terutama saat bekerja dengan dataset yang besar.

ProgramingLive

Either write something worth reading or do something worth writing. ~ Benjamin Franklin

Featured post

Road Map Menuju Sukses

Popular Posts