BAB 13 – Pagination & Filter Data: Menampilkan Data Besar di CodeIgniter

BAB 13 – Pagination & Filter Data: Menampilkan Data Besar di CodeIgniter

Seiring bertambahnya data di aplikasi, menampilkan semua data sekaligus akan membuat halaman lambat dan sulit dibaca.

Solusinya adalah pagination (halaman data) dan filter / search, sehingga pengguna bisa:

  • Melihat data per halaman
  • Mencari data sesuai kriteria tertentu
  • Menavigasi data dengan cepat

Pada BAB ini, kita akan membahas:

  • Pagination di CodeIgniter
  • Filter / pencarian data
  • Integrasi dengan tabel HTML dan Bootstrap

Tujuan Pembelajaran

Setelah menyelesaikan BAB 13, Anda akan mampu:

  1. Membuat pagination untuk data besar
  2. Menampilkan data terbagi per halaman
  3. Membuat filter / pencarian data
  4. Menggabungkan pagination dan filter agar efisien
  5. Menampilkan tabel responsif dengan Bootstrap

13.1 Pagination Dasar

CodeIgniter memiliki library pagination untuk membagi data menjadi beberapa halaman.

13.1.1 CI 3 – Contoh Controller

class Mahasiswa extends CI_Controller {
    public function index() {
        $this->load->library('pagination');

        $config['base_url'] = base_url('mahasiswa/index');
        $config['total_rows'] = $this->db->count_all('mahasiswa');
        $config['per_page'] = 5;
        $config['full_tag_open'] = '<ul class="pagination">';
        $config['full_tag_close'] = '</ul>';
        $config['cur_tag_open'] = '<li class="page-item active"><a class="page-link">';
        $config['cur_tag_close'] = '</a></li>';
        $config['num_tag_open'] = '<li class="page-item">';
        $config['num_tag_close'] = '</li>';

        $this->pagination->initialize($config);

        $page = $this->uri->segment(3, 0);
        $data['mahasiswa'] = $this->db->get('mahasiswa', $config['per_page'], $page)->result();
        $this->load->view('mahasiswa_list', $data);
    }
}

13.1.2 View Pagination

<table class="table table-striped">
<!-- tabel data -->
</table>
<div>
    <?= $this->pagination->create_links(); ?>
</div>

📌 Tips:

  • Gunakan Bootstrap untuk styling pagination
  • per_page bisa diubah sesuai kebutuhan

13.2 Filter / Pencarian Data

Filter memungkinkan pengguna mencari data berdasarkan kata kunci, misalnya nama mahasiswa.

Controller

public function search() {
    $keyword = $this->input->get('keyword', TRUE);
    $this->db->like('nama', $keyword);
    $data['mahasiswa'] = $this->db->get('mahasiswa')->result();
    $this->load->view('mahasiswa_list', $data);
}

Form Pencarian (View)

<form method="get" action="<?= base_url('mahasiswa/search') ?>" class="mb-3">
    <input type="text" name="keyword" placeholder="Cari nama..." class="form-control" style="width:200px; display:inline-block;">
    <button type="submit" class="btn btn-primary">Cari</button>
</form>

📌 Tips:

  • Gunakan like() untuk pencarian sebagian kata
  • Bisa menambahkan filter lain seperti jurusan atau NIM

13.3 Pagination + Filter Bersama

Kombinasi pagination dan filter membuat navigasi data lebih efisien.

Langkah-langkah:

  1. Tangkap keyword dari GET
  2. Hitung total data sesuai filter ($this->db->like()->count_all_results())
  3. Tampilkan data terbatas per halaman
  4. Sertakan keyword di link pagination agar filter tetap aktif

13.4 Tabel Responsif dengan Bootstrap

Gunakan Bootstrap agar tabel tetap rapi di semua ukuran layar:

<div class="table-responsive">
    <table class="table table-bordered table-striped">
        <thead class="table-dark">
            <tr>
                <th>No</th>
                <th>Nama</th>
                <th>NIM</th>
                <th>Jurusan</th>
            </tr>
        </thead>
        <tbody>
            <?php $no=1; foreach($mahasiswa as $m): ?>
            <tr>
                <td><?= $no++ ?></td>
                <td><?= $m->nama ?></td>
                <td><?= $m->nim ?></td>
                <td><?= $m->jurusan ?></td>
            </tr>
            <?php endforeach; ?>
        </tbody>
    </table>
</div>

📌 Keunggulan:

  • Tabel bisa digulir horizontal jika kolom banyak
  • Kombinasi pagination + filter membuat aplikasi user-friendly

Penutup

Dengan BAB 13 ini, aplikasi CodeIgniter Anda sudah mampu:

  • Menampilkan data besar dengan pagination
  • Membuat filter pencarian data
  • Menggabungkan pagination dan filter agar efisien
  • Menampilkan tabel responsif dengan Bootstrap

Langkah berikutnya bisa fokus pada fitur lanjutan seperti export data, grafik, atau dashboard interaktif, agar aplikasi lebih lengkap dan profesional.

Related Posts