Cara Menginstal dan Menggunakan DataTables


Cara Menginstal dan Menggunakan DataTables

Pasti teman-teman yang membaca tutorial ini sudah sering mendengar tentang plugin jquery datatables. plugin datatables adalah plugin yang di bangun dari jquery untuk menampilkan data dalam bentuk table dan sudah terintegrasi search form/form pencarian dan pagination untuk penomoran data pada table. sehingga kita tidak perlu lagi membuat form pencarian pada data. dan juga kita tidak perlu lagi membuat pagination secara manual. karena kelebihan dari datatables ini adalah dia telah mengintegrasikan pagination dan form pencarian pada table data kita. Cara Menginstal dan Menggunakan DataTables

Tentu saja akan sangat menghemat waktu kita jika kita menggunakan plugin jquery datatabes. kita tidak perlu lagi repot-repot membuat search form dan pagination pada table. kita tinggal menghubungkan file dengan plugin datatables dan kemudian memanggilnya dengan fungs datatables. baiklah Pada tutorial kali ini saya akan share tentang cara menginstal dan cara menggunakan datatable.

Cara Menginstal Plugin jQuery DataTables

Tahap awal yang harus kita lakukan untuk mulai menggunakan plugin datatables adalah download dulu plugin datatables di situs resminya di sini. karena plugin jquery datatables di bangun menggunakan jquery maka kita juga memerlukan library jquery. tapi kita tidak perlu lagi mendownload jquery nya. karena library jquery nya sudah di sediakan juga di dalam folder js pada directory datatables.

Baca Juga : Pengertian dan cara menggunakan jquery

Untuk bisa menggunakan plugin datatables kita harus menghubungkan dulu dengan file library jquery dan plugin datatables nya. ohya di tutorial ini saya juga menggunakan bootstrap agar tampilan dari table yang kita buat lebih menarik.

pastikan file-file yang teman-teman hubungkan sudah benar letaknya ya, kalau gak, gak bakalan work.

Cara Menggunakan DataTables

Setelah selesai menghubungkan file-file yang kita perlukan seperti bootstrap, jquery dan plugin jquery datatables. kemudian kita tinggal membuat table yang berisi data. data nya di sini saya buat asal-asalan aja asal udah berbentuk. format struktur penulisan element table html yang di baca oleh datatables harus menggunakan tag <thead> untuk table bagian kepala. dan tag <tbody> untuk table bagian body. Cara Menginstal dan Menggunakan DataTables

setelah selesai membuat table nya selanjutnya adalah kita berikan fungsi datatables nya

yang harus di perhatikan saat menggunakan datatables adalah nama class yang kita buat. di sini pada table saya membuat class dengan nama “data”.

maka hasilnya Cara Menginstal dan Menggunakan DataTables

cara menginstal dan menggunakan datatables

cara menginstal dan menggunakan datatables

datatables pun siap. sudah terdapat form pencarian dan pagination yang dapat teman-teman gunakan langsung. untuk pengaturn lebih lanjutnya teman-teman bisa melihat dan mencoba nya pada panduan penggunaan plugin jquery datatables yang telah di sediakan pada situs resminya. https://www.datatables.net/examples/index

 

Download Source Code

 

See the Pen Cara menginstal dan menggunakan datatables by Malas Ngoding (@malasngoding) on CodePen.0

Incoming search terms:

  • cara menggunakan datatables
  • malasngoding datatable
  • cara menggunakan datatable bootstrap
  • cara menggunakan data tables
  • cara menggunakan datatable
  • cara menggunakan datatables offline ci
  • coding datatables jquery-malasngoding
  • membuat datatablel dn bootstrap di ci
  • cara membuat datatable
  • cara menggunakan datatables bootstrap




About the author
Diki Alfarabi Hadi

Coding enthusiast. Someone who love learn something new. especially about web programming and web design. happy to share about knowledge and learn from other.


Discussion
  • One Comment
  • Dani 2 weeks ago

    Kalau menggunakan data CSV Bisa tidak ya ? Jika ada link refrensi bisa di share. trims



Write a Comment

Your email address will not be published. Required fields are marked *


CENTANG untuk bisa mengirimkan komentar. [ Verifikasi bukan robot ]