Cara Membuat Pencarian, Sorting, dan Pagination Tabel dengan Datatable di Php

Cara Membuat Pencarian, Sorting, dan Pagination Tabel  dengan Datatable di Php. Assalamualaikum, halo semuanya, jumpa lagi di sahretech, tutorial kali ini kita akan membuat sebuah tabel dengan full feature ada pencarian, pagination, sorting dan show entries. Bagaimana cara Buatnya ? ikuti tutorialnya berikut ini !

Dalam aplikasi nyata, biasanya sebuah list data dikelompokkan di dalam sebuah tabel. Untuk data yang jumlahnya masih sedikit tidak masalah jika fitur pencarian tidak digunakan. Tapi jika datanya sudah ratusan atau bahkan ribuan, fitur pencarian menjadi sangat penting untuk digunakan karena jika tidak maka akan banyak memakan waktu jika dicari secara manual.





Masalah lain jika data terlalu banyak, dan semua data harus ditumpuk menjadi satu di dalam sebuah halaman, maka halaman tersebut akan terlalu panjang dan ini menjadi tidak efisien. Sebetulanya fitur searching dan pagination bisa kalian buat sendiri tapi jika kalian mau yang instan-instan, ada sebuah plugin yang bisa memberikan kalian semua fitur tersebut tanpa banyak ngoding. Yaitu 'datatable'. Gimana cara pakenya, langsung aja liat di bawah ini !

Cara Menggunakan Plugin Datatable

• 1. Buat sebuah database latihan
• 2. Buat tabel mahasiswa dan ikuti strukturnya seperti gambar di bawah ini, lalu isi tabel mahasiswa dengan beberapa data

tabel mahasiswa

• 3. Buat sebuah folder baru dengan nama datatable, lalu buat sebuah file baru di dalamnya. Beri nama file tersebut dengan database.php. Lalu ikuti scriptnya seperti di bawah ini.

<?php 


    //melakukan koneksi ke database
    $koneksi        = mysqli_connect("localhost", "root", "", "latihan");

    //mengambil data mahasiswa
    $select         = "select * from mahasiswa";
    $select         = mysqli_query($koneksi, $select);



?>

• 4. Buat sebuah file baru dengan nama index.php, lalu isi file tersebut dengan script di bawah ini

<!-- datatable style -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">

<!-- jquery -->
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

<!-- membuat tabel -->
<table id="table_id" border=1 class="display">
    <thead>
        <tr>
            <th>No</th>
            <th>Nama</th>
            <th>Jenis Kelamin</th>
        </tr>
    </thead>
    <tbody>
        <?php
            //include file database untuk dapat menggunakan fungsi-fungsi di dalamnya
            include "database.php";

            //membuat variabell index penomoran
            $no = 1;

            //melakukan perualangan data dengan while
            while($data= mysqli_fetch_array($select)){
        ?>
        <tr>
            <!-- menampilkan data -->
            <td><?php echo $no++; ?></td>
            <td><?php echo $data['nama']; ?></td>
            <td><?php echo $data['jk']; ?></td>
        </tr>
            <?php } ?>
    </tbody>
</table>
<!-- jquery datatable -->
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>

<!-- fungsi datatable -->
<script>
$(document).ready( function () {
    $('#table_id').DataTable();
} );
</script>

• 5. Jalankan pada browser, maka hasilnya akan seperti gambar di bawah ini

Hasil Datatable

Penjelasan 

Pada tutorial kali ini kita menggunakan datatable cdn, jadi resource filenya tidak disimpan di komputer tapi diambil dari luar. Lalu jika kalian perhatikan pada script index.php di atas, penggunaannya sangat sederhana :

• Line 2 : include file datatable css, berfungsi untuk memberikan style pada tabel
• Line 5 : include file jquery
• Line 8 - 35 : buat sebuah tabel dan beri id tabel
• Line 37 : include file jquery datatable
• Line 41 : buat javascript function di bagian paling bawah.

Sangat sederhana dan simple, hanya 5 langkah di atas plugin datatable siap digunakan. Dengan datatable ini data-data kalian yang banyak bisa terorganisir dengan lebih baik. Ada fitur pencarian yang dapat mencari row dengan kata yang dimaksud, ada fitur paging yang dapat mebagi-bagi data ke dalam beberapa halaman dan juga ada fitur show data entries.

Lalu, apakah datatable sudah cukup ?. Jawabannya tidak, kita perlu datatable serverside. Datatable biasa dan datatable serverside memiliki perbedaan dalam meload data.

Saat data sedikit, kelemahan datatable biasa tidak akan terlihat, tapi jika data sudah terlalu banyak ratusan bahkan ribuan maka semua data akan diload dalam satu halaman. Kalian tidak percaya, coba untuk mengisi data ke dalam tabel sebanyak-banyaknya, maka, saat kalian klik kanan lalu pilih view page resource maka begitu panjang halaman yang dibuat, dalam kondisi seperti ini jelas sangat mengganggu performa website, jika data semakin banyak, maka load website akan lebih lama pula.

Cukup sekian tutorial cara membuat pencarian, sorting, dan pagination tabel dengan datatabel di php. Kurang lebihnya saya mohon maaf, bila ada pertanyaan, kritik dan saran silahkan tinggalkan di kolom komentar di bawah ini. Happy coding, dan sampai berjumpa di tutorial selanjutnya