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.
type =”text/javascript” src =”assets/DataTables/media/js/jquery.js” >
type =”text/javascript” src =”assets/DataTables/media/js/jquery.dataTables.js” >
<<>link rel=”stylesheet” type=”text/css” href=”assets/css/bootstrap.css”>
<<>link rel=”stylesheet” type=”text/css” href=”assets/DataTables/media/css/jquery.dataTables.css”>
<<>link rel=”stylesheet” type=”text/css” href=”assets/DataTables/media/css/dataTables.bootstrap.css”>
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 untuk table bagian kepala. dan tag untuk table bagian body.Cara Menginstal dan Menggunakan DataTables
<<>title>Cara Menggunakan Datatables | Malas Ngoding<<>/title>
type =”text/javascript” src =”assets/DataTables/media/js/jquery.js” >
type =”text/javascript” src =”assets/DataTables/media/js/jquery.dataTables.js” >
<<>link rel=”stylesheet” type=”text/css” href=”assets/css/bootstrap.css”>
<<>link rel=”stylesheet” type=”text/css” href=”assets/DataTables/media/css/jquery.dataTables.css”>
<<>link rel=”stylesheet” type=”text/css” href=”assets/DataTables/media/css/dataTables.bootstrap.css”>
<<>h1>Menampilkan data dengan datatables | Malas Ngoding<<>/h1>
<<>table class=”table table-striped table-bordered data”>
setelah selesai membuat table nya selanjutnya adalah kita berikan fungsi datatables nya
type =”text/javascript” >
$(document ).ready (function (){ $(‘.data’ ).DataTable (); });
yang harus di perhatikan saat menggunakan datatables adalah nama class yang kita buat. di sini pada table saya membuat class dengan nama “data”.
<<>title>Cara Menggunakan Datatables | Malas Ngoding<<>/title>
type =”text/javascript” src =”assets/DataTables/media/js/jquery.js” >
type =”text/javascript” src =”assets/DataTables/media/js/jquery.dataTables.js” >
<<>link rel=”stylesheet” type=”text/css” href=”assets/css/bootstrap.css”>
<<>link rel=”stylesheet” type=”text/css” href=”assets/DataTables/media/css/jquery.dataTables.css”>
<<>link rel=”stylesheet” type=”text/css” href=”assets/DataTables/media/css/dataTables.bootstrap.css”>
<<>h1>Menampilkan data dengan datatables | Malas Ngoding<<>/h1>
<<>table class=”table table-striped table-bordered data”>
type =”text/javascript” >
$(document ).ready (function (){ $(‘.data’ ).DataTable (); });
maka hasilnyaCara 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. /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
* cara menggunakan datatable
* cara menggunakan data table
* cara menggunakan datatable bootstrap
* cara menggunakan datatables bootstrap
* cara menggunakan data tables
* pengertian datatable
* malasngoding datatable
* cara membuat datatable
* Cara datatable php