Membuat Searching, Pagination, & Sorting dengan DataTables Client-side

Assalamu'alaikum wr. wb.

Apa kabar teman-teman YukCoding? Semoga sehat semuanya. Amin.
Pada kesempatan ini kita akan belajar bareng lagi, melanjutkan tutorial yang sebelumnya. Bagi yang ketinggalan silakan ikuti tutorial-tutorial sebelumnya yang dapat dilihat secara lengkap di DAFTAR ISI.


Kali ini kita akan menbuat searching (pencarian), pagination, dan sorting dengan menggunakan DataTables yang Client-side. Jadi apa itu DataTable? DataTables adalah salah satu plugin dari jQuery yang digunakan untuk menampilkan data dalam bentuk grid (tabel) dan memiliki banyak fitur-fitur (plugin-plugin) interaktif. Ada dua versi pada DataTables yaitu client-side dan server-side. Apa sih perbedaannya? Bagaimana sih cara menggunakannya? Bagaimana memadukannya dengan bootstrap? Silakan ikuti tutorial video dibawah karena admin menjelaskan secara gamblang di dalamnya. Bisa juga dipelajari pada dokumentasi di website resminya dengan alamat datatables.net.

Bagi yang kesulitan download dataTables untuk tutorial ini, bisa download disini.

Oke langsung saja tutorialnya dapat teman-teman ikuti pada video di bawah ini. Jangan lupa setting kualitasnya menjadi HD agar video menjadi jelas :



Gimana mudah bukan?

Bagi yang tidak bisa men-download file dataTables yang kita gunakan di dalam tutorial, bisa di download DISINI.

Jangan lupa subscribe, like, dan share tutorial-tutorial YukCoding.

Semoga bermanfaat, happy coding :)

Wassalamu'alaikum wr. wb.
Membuat Searching, Pagination, & Sorting dengan DataTables Client-side
Item Reviewed: Membuat Searching, Pagination, & Sorting dengan DataTables Client-side 9 out of 10 based on 10 ratings. 9 user reviews.

Makasih Mas Tutorialnya, Jagan lama Lama Updatenya a hehehe

Sama2. Hehe maaf karena saya update tutorial tergantung waktu luangnya.

Mas, makasih tutorialnya sangat membantu..

Mohon ajarin dataTables yang versi server-side :'(..

Sama2 :)
Sabar mas, InsyaAllah nanti pasti akan saya buat tutorial datatables yang server-side

Mas gimana cara munculin alert kalau stok barang nya kurang dari 3 ?

Cek dulu ke database gan, kasih kondisi, jika data kurang dari 3 maka keluar alert

di konsole muncul kaya gini tapi di web ga muncul ini kenapa yah mas ?

ReferenceError: jQuery is not defined[Pelajari Lebih Lanjut] datatables.min.js:17:124
http://localhost/admin/pages/dataTables/datatables.min.js:17:124
http://localhost/admin/pages/dataTables/datatables.min.js:17:2
reflow: 0.54md
ReferenceError: $ is not defined[Pelajari Lebih Lanjut] datatabel.php:103:1
http://localhost/admin/pages/datatabel.php:103:1

jQuery nya belum kamu load. Coba cek lagi

ini knpa yah... error di google... cara fix nya gimana...

Failed to load resource: the server responded with a status of 404 (Not Found)
fontawesome-webfont.woff Failed to load resource: the server responded with a status of 404 (Not Found)
morris.min.js:6 Uncaught Error: Graph container element not found
at d [as constructor] (morris.min.js:6)
at d.c [as constructor] (morris.min.js:6)
at new d (morris.min.js:6)
at HTMLDocument. (dashboard.js:127)
at i (jquery-2.2.3.min.js:2)
at Object.fireWith [as resolveWith] (jquery-2.2.3.min.js:2)
at Function.ready (jquery-2.2.3.min.js:2)
at HTMLDocument.J (jquery-2.2.3.min.js:2)
fontawesome-webfont.ttf Failed to load resource: the server responded with a status of 404 (Not Found)

Gak usah di load morris nya gan

Share Datatables nya bang yang versi baru ane belum faham

Ohh sudah ada maaf kurang nyimak wkwk

Komentar ini telah dihapus oleh pengarang.

Gan ,saya sudah ikuti tahapan itu. Tapi masih tidak muncul untuk search dll nya. Kenapa ya?

permisi mas numpang tanya misal kita mau edit data di paging halaman 2 ketika di simpan kok munculnya ke paging halaman 1 ya ? bukan paging halaman 2 tempat yang saya edit tadi, ada solusinya kah mohon petunjuknya mas

Redirect nya arahkan ke paging yang di edit, bisa memanfaatkan parameter GET

Mas, ini errornya gak tampil semuanya, kenapa ya?
Uncaught TypeError: Cannot set property '4' of undefined
at _fnDetectHeader (jquery.dataTables.js:3770)
at HTMLTableElement. (jquery.dataTables.js:1131)
at Function.each (jquery.js:354)
at jQuery.fn.init.each (jquery.js:189)
at jQuery.fn.init.DataTable [as dataTable] (jquery.dataTables.js:869)
at jQuery.fn.init.$.fn.DataTable (jquery.dataTables.js:15123)
at HTMLDocument. (index.php?page=kpr:495)
at mightThrow (jquery.js:3534)
at process (jquery.js:3602)

Mas, ini errornya gak tampil semuanya, kenapa ya?
Uncaught TypeError: Cannot set property '4' of undefined
at _fnDetectHeader (jquery.dataTables.js:3770)
at HTMLTableElement. (jquery.dataTables.js:1131)
at Function.each (jquery.js:354)
at jQuery.fn.init.each (jquery.js:189)
at jQuery.fn.init.DataTable [as dataTable] (jquery.dataTables.js:869)
at jQuery.fn.init.$.fn.DataTable (jquery.dataTables.js:15123)
at HTMLDocument. (index.php?page=kpr:495)
at mightThrow (jquery.js:3534)
at process (jquery.js:3602)

Jumlah th td mu harus sama dengan data yg kamu tampilkan

datatables.min.js:36 Uncaught TypeError: Cannot set property '_DT_CellIndex' of undefined
at Ja (datatables.min.js:36)
at N (datatables.min.js:28)
at HTMLTableRowElement. (datatables.min.js:28)
at jquery-1.11.1.min.js:2
at Function.map (jquery-1.11.1.min.js:2)
at m.fn.init.map (jquery-1.11.1.min.js:2)
at oa (datatables.min.js:28)
at e (datatables.min.js:104)
at HTMLTableElement. (datatables.min.js:105)
at Function.each (jquery-1.11.1.min.js:2)

Admin ini kenapa ya? Mohon bantuannya

Cek apakah jumlah th nya sama dengan jumlah td nya

Mas , ini saya sudah semua ikuti langkah langkahnya tpi search dan peginationnya muncul tpi tdk berfungsi , kalau kita mencari muncul pesan "no marching records found" padahal kata yg saya cari itu ada, mohon bantuanx mas🙏🙏🙏

Bahar83 : Coba cek dokumentasinya

gan kok punya css nya datatables ga mau sinkron ama tabel yg udah saya buat ya...

mas itu kalo tabelnya dibuat di modal bagaimana ya :bingung ?

Komentar ini telah dihapus oleh pengarang.
Emoticon? nyengir

Berkomentarlah dengan bahasa yang relevan dan sopan.. #ThinkHIGH! ^_^

Info

Agar tidak ketinggalan update menarik :

Follow instagram @yukcoding
Subscribe youtube YukCoding Media

Happy coding :)
Just load it!