Fitur Pagination pada CodeIgniter 4

Juli 14, 2025

Halo, Sobat Jagoan! Setelah selesai membuat fitur Create, Read, Update, dan Delete (CRUD) pada CodeIgniter 4, selanjutnya kamu bisa menambahkan fitur pagination agar daftar barang tidak ditampilkan semua dalam satu halaman. Dengan pagination, halaman jadi lebih rapi dan mudah dibaca. Yuk, simak langkah-langkahnya, Sob!

Pagination di Codeigniter 4

Secara bawaan, CodeIgniter 4 menyediakan pengaturan tampilan dan perilaku default dari pagination ($pager) di dalam app/Config/Pager.php. Pagination ($pager) adalah fitur untuk membagi data menjadi beberapa halaman, agar tidak tampil semua sekaligus dalam satu halaman panjang.

Terdapat 3 templat default pagination di dalam Pager.php yaitu:

				
					public array $templates = [
    'default_full'   => 'CodeIgniter\Pager\Views\default_full',
    'default_simple' => 'CodeIgniter\Pager\Views\default_simple',
    'default_head'   => 'CodeIgniter\Pager\Views\default_head',
];

Bagian tersebut berfungsi untuk menyimpan daftar template tampilan untuk pagination. Artinya ketika kamu menulis: $pager->links(‘default’, ‘default_full’); , CodeIgniter akan mencari file system /Pager/Views/default_full.php. Ketika menggunakannya kamu bisa menambahkan style CSS sendiri jika ingin pagination tampil rapi dan menarik, karena template bawaan milik CodeIgniter tidak memiliki styling.

Tapi, kamu juga bisa membuat template sendiri, misalnya bootstrap.php lalu tambahkan ke array $templates agar bisa dipanggil di view.

Penjelasan masing-masing templates:

Templates	File Tujuan	Penjelasan
default_full	vendor/codeigniter4/framework/system/Pager/Views/default_full.php	Tampilan lengkap pagination (First, Previous, nomor halaman, Next, Last)
default_simple	vendor/codeigniter4/framework/system/Pager/Views/default_simple.php	Hanya menampilkan link halaman sebelumnya dan selanjutnya (tanpa nomor)
default_head	vendor/codeigniter4/framework/system/Pager/Views/default_head.php	Biasanya digunakan untuk menyisipkan meta tag header pagination (SEO friendly)

Lalu, pada bagian public int $perPage = 20; berfungsi menentukan jumlah item yang ditampilkan per halaman secara default, jika tidak menyebutkan secara eksplisit di controller.

				
					$model->paginate(); // Tanpa angka

Artikel kali ini akan membuat pagination menggunakan template default_full:

STEP 1: Edit controller Barang.php pada bagian method index() dengan menambahkan sintaks kode pagination seperti berikut:

				
					public function index()
{
    $model = new BarangModel();

    // Ambil data barang dengan pagination (misalnya 5 data per halaman)
    $data['barang'] = $model->paginate(5);

    // Kirim objek pager ke view
    $data['pager'] = $model->pager;

    return view('barang/index', $data);
}

STEP 2: Kemudian, buka app/Views/index.php untuk menambahkan link pagination setelah penutup tag tabel </table> atau setelah blok <?php endif; ?>

				
					<!-- Tampilkan pagination -->
<div class="mt-3">
    <?= $pager->links('default', 'default_full') ?>
</div>

STEP 3: Supaya urutan nomor tetap sesuai halaman, ubah $no=1 menjadi:

				
					<?php $no = 1 + (5 * ($pager->getCurrentPage('default') - 1)); ?>

Catatan: Angka 5 di atas harus sesuai dengan jumlah data per halaman (paginate(5).

Sintaks kode lengkap pada view setelah ditambahkan pagination dan penomoran.

STEP 4: Selanjutnya, menambahkan styling untuk template pagination di dalam tag head atau apabila kamu ingin memisahkan file CSS juga bisa.

				
					<style>
        .pagination {
            display: flex;
            justify-content: center;
            list-style: none;
            gap: 6px;
            padding-left: 0;
        }

        .pagination li {
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        .pagination li a {
            display: block;
            padding: 6px 12px;
            text-decoration: none;
            color: #007bff;
        }

        .pagination li.active {
            background-color: #007bff;
            border-color: #007bff;
        }

        .pagination li.active a {
            color: white;
            font-weight: bold;
        }

        .pagination li a:hover {
            background-color: #e9ecef;
        }
    </style>

STEP 5: Lalu, akses halaman http://localhost/barang di browser untuk melihat pagination telah diimplementasikan dengan baik.

Nah, itu dia cara mudah membuat pagination di CodeIgniter 4. Kamu bisa eksplorasi lebih lanjut dengan mencoba berbagai template bawaan seperti default_simple atau default_head, bahkan membuat template pagination versi kamu sendiri. Selamat mencoba, Sob!

Kalau ada yang masih bikin bingung, jangan ragu hubungi Tim Support Jagoan Hosting ya, Sob!