Menampilkan datatables dari ajax

Menampilkan datatables dari ajax

2993
38
SHARE

Halooooooo sahabat harviacode.com…setelah kemarin kita membahas tentang menampilkan data dengan datatables, kali ini kita masih akan membahas tentang datatables, namun demikian kali ini kita akan menggunakan ajax source. Datatables juga mendukung menampilkan data dengan sumber berasal dari ajax. Dengan data dari ajax, load akan terasa lebih cepat dibandingkan dengan menampilkan secara biasa.

Untuk membuat ajax source datatables, berikut ini adalah langkah-langkahnya :
Step 1 : Anda perlu mendownload datatables, bootstrap, jquery dan images yang diperlukan. 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.

Step 3 : Buatlah folder ajax dan file provinsi.php di dalamnya. Berikut ini adalah kode untuk propinsi.php dalam folder ajax.

 

Sedikit penjelasan :
a. Pada file index, kita membuat tabel dengan id provinsi. Dalam tabel tersebut hanya terdapat element thead, sementara tbody akan dikirim melalui ajax.

b. Masih di file index.php, kita memanggil fungsi datatable melalui javascript. Parameter yang kita kirim ada 3  :
ajax : merupakan alamat file ajax yaitu ‘ajax/provinsi.php’,
order : untuk mentukan urutan default tabel. Dalam hal ini kita mengirimkan urutan nomor index. Dalam contoh kita mengirimkan ‘1’, karena kita akan mengurutkan berdasarkan kolom kedua datatable yang kita buat yaitu nama provinsi. Jika anda ingin mengurutkan berdasarkan kolom pertama anda tinggal menggantinya dengan angka ‘0’.
columns : merupakan kolom yang ingin kita tampilkan. Jumlah column ini harus sesuai dengan urutan dan jumlah kolom pada elemen thead. Dalam column, kita bisa mengirimkan data (nama field), width (mengatur lebar) dan sClass (untuk menambahkan nama class pada elemen).

c. Selanjutnya, kita lihat di file ajax/provinsi.php. Dalam file ini kita mengambil data dari database dan menampilkannya dengan format JSON. JSON inilah yang dibaca oleh index.php dan ditampilkan dalam bentuk tabel.

Mudah bukan membuatnya.. hehe. Berikut ini adalah demo dan link download.

Demo | Download

Pada kesempatan berikutnya kita akan membahas tentang bagaimana menambahkan nomor urut dalam ajax source datatables. Semoga bermanfaat bagi sahabat harviacode.com. Terima kasih atas kunjungannya. Jangan lupa komentarnya ya 😀

Bagikan artikel ini ya.. terima kasih

38 COMMENTS

  1. pak saya kok muncul warning ‘DataTables warning (table id = ‘example’): Cannot reinitialise DataTable…blablabla… tolong bantuannya pak,terrima kasih….

        • sepertinya tdk ad yg salah dgn surat masuk.php. coba cek kmbali output json nya.. sama nama fieldnya. gunakan firebux biar lebih mudah..

          • output json, g mslh kynya pak dan sesuai dengan nama field…..

            json:

            {“data” : [{“no_surat”:”S-41″,”0″:”S-41″,”sifat”:”SANGAT SEGERA”,”1″:”SANGAT SEGERA”,”perihal”:”PERMINTAAN KEDUA”,”2″:”PERMINTAAN KEDUA”,”seksi”:”2″,”3″:”2″}]}

            wah dah cape googling, tambah bretrieve true lah inilah,itulah,n still not working… T_T, oiya kalau ditambah fndestroy diatas datatables di charisma.js nya, warning hilang pak, tp data g tampil….

          • iya udah bener tu jsonnya. udah saya coba dan bisa (nb: tanpa charisma.js). brarti kemungkinan charisma.js nya conflict. joba pakai noConflict jquery. agak susah ane cari salahnya dimana kalo gak lihat kodenya langsung. hee.. udah dicoba belum pakai firebux. nanti ketahuan salahnya dimana.

  2. coba ntar ane googling tentang noConflict jquery… hehe.. oya kode yang mana ya pak yg perlu, perasaan 33 nya udah sya kirim, yg mn yg kurang pak? biar sy kirim semua, hehe… mumpung msh ada yg mau nolong….huahaha…. firebux belum sy coba, krn pernah coba dulu, tp sama aja g ngerti mau diapain bug nya….hahahalagi…… T_T

    • itu kan ada file2 yg di include sama db nya q jg gak ada, makanya q gak bisa cobain charisma.js nya. kalo yg lain sih ok, kayaknya. coba dulu pakai firebux ya. caranya lihat di console, ntar kalo ada error bakal muncul pesannya.

    • udah banyak artikel di harviacodenya mas, silahkan search dengan kata kunci ‘datatables’ nanti akan muncul banyak tutorial datatables menggunakan CI mulai dari clientside sampai serverside

  3. mas, kalo mau ditambahkan edit sama delete *seperti yang di tutorial sebelumnya* itu column dan idnya dikirim melalui file ajaxnya berarti ya mas? soalnya whilenya adanya disitu… kemudian untuk data yang maximal 2000 data dengan jumlah 30 column apakah bisa jika saya tidak menggunakan ajax untuk menampilkan datatablesnya ?

  4. mas kalau untuk 2000 data dengan jumlah column 30 apakah loadnya lambat jika saya menggunakan datatable namun tidak dengan ajax ?
    kemudian jika saya menggunakan ajax dimana y mas saya harus mengirim id untuk melakukan edit dan del pada tablenya ? apakah di file ajaxnya? krn yg ad whilenya cmn disitu….

  5. mas kalau untuk 2000 data dengan jumlah column 30 apakah loadnya lambat

    jika saya menggunakan datatable namun tidak dengan ajax ?
    kemudian jika saya menggunakan ajax dimana y mas saya harus mengirim id

    untuk melakukan edit dan del pada tablenya ? apakah di file ajaxnya?

    krn yg ad whilenya cmn disitu….

  6. assalamualaikum gan,
    ane newbie neh sm ajax. ane cpba apa adanya script agan diatas tapi kok keluar warning:
    DataTables warning: table id=provinsi – Requested unknown parameter ‘provinsi’ for row 0, column 1. For more information about this error, please see http://datatables.net/tn/4

    Kenapa ya, mohon pencerahannya Gan.
    Makasih sebelumnya

    • waalaikumsalam mas.. cek kembali apakah ada field/kolom provinsi di tabel mas. pesan error itu muncul karena colums di datatables tidak sama dengan data yang dikirim melalui responnya.

      • field/kolom provinsi nya ada Mas, dan sql nya juga ane ambil dari sql yang Mas sediakan. Apakah kira-kira ada penyebab lain semisal versi mysql yang gak support ?

    • dari pesan errornya nampaknya alamat request data untuk datatablesnya salah mas. hasilnya mungkin 400(not found) atau 500(internal server error). coba pastika alamat untuk datanya bisa diakses.

LEAVE A REPLY