Menampilkan data dengan datatables

Menampilkan data dengan datatables

3511
6
SHARE

Pada artikel kali ini saya akan berbagi informasi mengenai cara menampilkan data. Jika pada artikel sebelumnya kita telah belajar bagaimana membuat paginasi disini dan disini, pada kesempatan kali ini kita akan belajar menampilkan data dengan menggunakan datatable. Dengan menggunakan datatables, kita tidak perlu membuat paginasi dan pencarian secara manual.

Berikut ini adalah contoh cara menampilkan data dengan datatables :

Step 1 : Anda perlu mendownload datatables, bootstrap, dan jquery. Anda bisa mendownload file-file tersebut di akhir artikel ini.

Step 2 : Saya asumsikan anda telah memiliki database dan sebuah tabel provinsi di dalamnya (anda juga bisa mendownloadnya di akhir artikel ini). Sekarang tinggal buat file index.php untuk menampilkan data dengan datatables. Berikut ini adalah kode untuk index.php.

Demo | Download

 

Untuk membuat tabel dengan datatable ini sama dengan membuat tabel pada umumnya. Kita hanya perlu menambahkan id pada elemen table, kemudian membuat datatables dengan fungsi javascript. Tentu kita juga harus menginclude kan javascript dan css datatables.

Dengan cara di atas sebenarnya kita melakukan pengambilan seluruh data sekaligus, kemudian datatables yang membuat paginasinya. Jika data anda banyak misalnya mencapai puluhan ribu, teknik di atas akan terasa berat. Untuk mengatasi hal tersebut, kita bisa menggunakan datatables secara serverside.

Cara membuat datatables secara serverside akan kita bahas di sini.

Terima kasih telah berkunjung ke harviacode.com, semoga bermanfaat.

Bagikan artikel ini ya.. terima kasih

6 COMMENTS

  1. gan klow kolom searchnya ga nampil paging nya juga..
    itu knp ya
    masalahnya mungkin disini bukan
    $(function() {
    $(“#provinsi”).dataTable();
    });

    ada solusi gan tolong dibantu thanks

  2. saya coba tambahkan fieldnya (dicontoh kan cuma 3, nomor, kode provinsi, dan nama provinsi) saya tambahkan beberapa field lagi ke kanan. tapi kok yang cuma bisa diklik untuk disort cuma yang 3 paling depan ya. sisanya ga bisa. diapain ya?

LEAVE A REPLY