User hari ini : 472 
User Online: 19Membuat Datatables Bootstrap
Publish Date : 09-04-2016 , dibaca 13692 kali, Hari ini dibaca : 1 kali ,0 comments
Di tutorial kali ini admin akan menjelaskan Cara Membuat Datatables dengan Bootstrap, dengan menggunakan datatables bootstrap ini akan memudahkan kita untuk menampilkan data,,, kenapa... ? Karena di datatables sudah terdapat paging otomatis, pencarian otomatis, sort otomatis,, nah banyak banget kan..? coba bayangkan kalo kita menampilkan data yang ada di database dengan table biasa,,,fitur-fitur tersebut tidak ada,, dan kita harus membuat manual.. Capek deh.. haha..
Berikut ini contoh datatables... bisa dilihat pada gambar dibawah ini..
Cara Membuat Tabel Bootstrap dengan Datatables
Sudah lihat bentuk datatables.. ? saya yakin anda seorang programer pasti sangat membutuhkan ini.. dan pasti tertarik untuk membuatnya.. jika tidak..? mungkin anda sudah tau tentang hal ini,, jika tidak juga?? berarti anda programer ketinggalan zaman... heee.. becanda doank..
Ok.. Mari kita belajar membuat tabel dengan Datatables di Bootstrap :
Bootstrap
Pertama download terlebih dahulu bootstrap dari website resminya di sini : DOWNLOAD
Kemudian extrak folder CSS, Font, dan Js ke dalam folder Data_tables
Sekarang download style data table boostrap di sini : DOWNLOAD ( CTRL + S )
Simpan dalam folder Js
*Notes
Versi bootsrap yang di gunakan pada artikel ini adalah bootsrap versi 3
Jquery
Sekarang untuk data tablesnya download di sini : DOWNLOAD ( CTRL + S )
Letakan dalam folder Js
Letakan dalam folder Js
Note :
Jika anda Kesulitan untuk mendownload nya, anda bisa menggunakan script dibawah ini, (letakkan di antara tag <head> paste disini </head> , dan dengan catatan komputer anda harus terkoneksi internet
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/plug-ins/3cfcc339e89/integration/bootstrap/3/dataTables.bootstrap.css">
<script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" language="javascript" src="http://cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="http://cdn.datatables.net/plug-ins/3cfcc339e89/integration/bootstrap/3/dataTables.bootstrap.js"></script>
Code HTML
Untuk Membuat datatables dengan bootstrap anda bisa copas script dibawah ini , Sekarang untuk markupnya buatlah sebuah file HTML baru dengan nama index.php di dalam folder Data_tables dengan isi script :
<html>
<head>
<title>Data Tables Dengan Bootstrap | Suckittrees.com</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/dataTables.bootstrap.css">
<!--Jika Tidak di download File Bootstrapnya silahkan gunakan link berikut-->
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/plug-ins/3cfcc339e89/integration/bootstrap/3/dataTables.bootstrap.css">
<script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" language="javascript" src="http://cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="http://cdn.datatables.net/plug-ins/3cfcc339e89/integration/bootstrap/3/dataTables.bootstrap.js"></script>
<!--End Link yang langsung ke website nya -->
</head>
<body>
<div class="container">
<h2 class="text-center">Suckittrees.com</h2>
<h2 class="text-center">Data Tables Dengan Bootstrap</h2>
<div class="box-body table-responsive">
<table id="example1" class="table table-bordered table-striped">
<thead>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>Trident</td>
<td>Internet
Explorer 4.0</td>
<td>Win 95+</td>
<td> 4</td>
<td>X</td>
</tr>
<tr>
<td>Trident</td>
<td>Internet
Explorer 5.0</td>
<td>Win 95+</td>
<td>5</td>
<td>C</td>
</tr>
<tr>
<td>Trident</td>
<td>Internet
Explorer 5.5</td>
<td>Win 95+</td>
<td>5.5</td>
<td>A</td>
</tr>
<tr>
<td>Trident</td>
<td>Internet
Explorer 6</td>
<td>Win 98+</td>
<td>6</td>
<td>A</td>
</tr>
<tr>
<td>Trident</td>
<td>Internet Explorer 7</td>
<td>Win XP SP2+</td>
<td>7</td>
<td>A</td>
</tr>
<tr>
<td>Trident</td>
<td>AOL browser (AOL desktop)</td>
<td>Win XP</td>
<td>6</td>
<td>A</td>
</tr>
<tr>
<td>Gecko</td>
<td>Firefox 1.0</td>
<td>Win 98+ / OSX.2+</td>
<td>1.7</td>
<td>A</td>
</tr>
<tr>
<td>Gecko</td>
<td>Firefox 1.5</td>
<td>Win 98+ / OSX.2+</td>
<td>1.8</td>
<td>A</td>
</tr>
<tr>
<td>Gecko</td>
<td>Firefox 2.0</td>
<td>Win 98+ / OSX.2+</td>
<td>1.8</td>
<td>A</td>
</tr>
<tr>
<td>Gecko</td>
<td>Firefox 3.0</td>
<td>Win 2k+ / OSX.3+</td>
<td>1.9</td>
<td>A</td>
</tr>
<tr>
<td>Gecko</td>
<td>Mozilla 1.5</td>
<td>Win 95+ / OSX.1+</td>
<td>1.5</td>
<td>A</td>
</tr>
<tr>
<td>Gecko</td>
<td>Mozilla 1.6</td>
<td>Win 95+ / OSX.1+</td>
<td>1.6</td>
<td>A</td>
</tr>
<tr>
<td>Gecko</td>
<td>Mozilla 1.7</td>
<td>Win 98+ / OSX.1+</td>
<td>1.7</td>
<td>A</td>
</tr>
<tr>
<td>Gecko</td>
<td>Mozilla 1.8</td>
<td>Win 98+ / OSX.1+</td>
<td>1.8</td>
<td>A</td>
</tr>
<tr>
<td>Gecko</td>
<td>Seamonkey 1.1</td>
<td>Win 98+ / OSX.2+</td>
<td>1.8</td>
<td>A</td>
</tr>
<tr>
<td>Gecko</td>
<td>Epiphany 2.20</td>
<td>Gnome</td>
<td>1.8</td>
<td>A</td>
</tr>
<tr>
<td>Webkit</td>
<td>Safari 1.2</td>
<td>OSX.3</td>
<td>125.5</td>
<td>A</td>
</tr>
<tr>
<td>Webkit</td>
<td>Safari 1.3</td>
<td>OSX.3</td>
<td>312.8</td>
<td>A</td>
</tr>
<tr>
<td>Webkit</td>
<td>Safari 2.0</td>
<td>OSX.4+</td>
<td>419.3</td>
<td>A</td>
</tr>
<tr>
<td>Webkit</td>
<td>Safari 3.0</td>
<td>OSX.4+</td>
<td>522.1</td>
<td>A</td>
</tr>
<tr>
<td>Webkit</td>
<td>OmniWeb 5.5</td>
<td>OSX.4+</td>
<td>420</td>
<td>A</td>
</tr>
<tr>
<td>Webkit</td>
<td>iPod Touch / iPhone</td>
<td>iPod</td>
<td>420.1</td>
<td>A</td>
</tr>
<tr>
<td>Webkit</td>
<td>S60</td>
<td>S60</td>
<td>413</td>
<td>A</td>
</tr>
<tr>
<td>Presto</td>
<td>Opera 7.0</td>
<td>Win 95+ / OSX.1+</td>
<td>-</td>
<td>A</td>
</tr>
<tr>
<td>Presto</td>
<td>Opera 7.5</td>
<td>Win 95+ / OSX.2+</td>
<td>-</td>
<td>A</td>
</tr>
<tr>
<td>Presto</td>
<td>Opera 8.0</td>
<td>Win 95+ / OSX.2+</td>
<td>-</td>
<td>A</td>
</tr>
<tr>
<td>Presto</td>
<td>Opera 8.5</td>
<td>Win 95+ / OSX.2+</td>
<td>-</td>
<td>A</td>
</tr>
<tr>
<td>Presto</td>
<td>Opera 9.0</td>
<td>Win 95+ / OSX.3+</td>
<td>-</td>
<td>A</td>
</tr>
<tr>
<td>Presto</td>
<td>Opera 9.2</td>
<td>Win 88+ / OSX.3+</td>
<td>-</td>
<td>A</td>
</tr>
<tr>
<td>Presto</td>
<td>Opera 9.5</td>
<td>Win 88+ / OSX.3+</td>
<td>-</td>
<td>A</td>
</tr>
<tr>
<td>Presto</td>
<td>Opera for Wii</td>
<td>Wii</td>
<td>-</td>
<td>A</td>
</tr>
<tr>
<td>Presto</td>
<td>Nokia N800</td>
<td>N800</td>
<td>-</td>
<td>A</td>
</tr>
<tr>
<td>Presto</td>
<td>Nintendo DS browser</td>
<td>Nintendo DS</td>
<td>8.5</td>
<td>C/A<sup>1</sup></td>
</tr>
<tr>
<td>KHTML</td>
<td>Konqureror 3.1</td>
<td>KDE 3.1</td>
<td>3.1</td>
<td>C</td>
</tr>
<tr>
<td>KHTML</td>
<td>Konqureror 3.3</td>
<td>KDE 3.3</td>
<td>3.3</td>
<td>A</td>
</tr>
<tr>
<td>KHTML</td>
<td>Konqureror 3.5</td>
<td>KDE 3.5</td>
<td>3.5</td>
<td>A</td>
</tr>
<tr>
<td>Tasman</td>
<td>Internet Explorer 4.5</td>
<td>Mac OS 8-9</td>
<td>-</td>
<td>X</td>
</tr>
<tr>
<td>Tasman</td>
<td>Internet Explorer 5.1</td>
<td>Mac OS 7.6-9</td>
<td>1</td>
<td>C</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</tfoot>
</table>
</div><!-- /.box-body -->
</div>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.dataTables.min.js"></script>
<script src="js/dataTables.bootstrap.js"></script>
<script type="text/javascript">
$(function() {
$('#example1').dataTable();
});
</script>
</body>
</html>Perhatikan pada baris kode berikut :
<script type="text/javascript">
$(function() {
$('#example1').dataTable();
});
</script>Script ini lah yang digunakan untuk menyeleksi id tabel yang ingin digunakan sebagai data table. di sini kita memanggil id tabel #example1 maka tabel dengan id #example1 akan berubah menjadi data table yang sudah dilengkapi dengan pagination, serach dan sorting.
Anda juga dapat mengkonfigurasikan fitur yang anda gunakan. Baca refrensinya langsung di website resminya di sini fitur apa saja yang dapat anda gunakan : DATA TABLES
Jasa Pembuatan Website Pemda 
Aplikasi SPPD Terbaru
Software Aplikasi Perpustakaan Berbasis Web
Aplikasi Pengolahan Dana Tambahan Guru PHP Mysql
Source Code Sistem Informasi Surat Perintah Perjalanan Dinas (SPPD) PHP MYSQLi
Moving Sign atau Running Text Dengan Mikrokontroler 
Aplikasi Absensi Siswa Fingerprint dengan Sms Gateway.jpg)
Aplikasi Alumni Berbasis Website (Update RESPONSiVE)
Aplikasi Penyewaan Tenda Berbasis Web PHP MYSQL
Sistem Informasi Pembuatan Akta Notaris online
Aplikasi Penjualan Obat Apotik PHP MYSQL