Memasang DataTables Bootstrap Responsive di Blogger
Memasang Datatable Bootstrap Responsive di Blogger - Datatable adalah plug-in untuk jQuery Javascript Library. Plug-in ini merupakan alat yang sangat flexibel berdasarkan fondasi peningkatan progresiv dan akan menambahkan kontrol interaksi lanjutan ke tabel HTML manapun. Datatable biasanya digunakan Developer untuk membuat aplikasi berbasis web yang dipasang bersama Framework Bootstrap, Namun disini saya akan menerapkan datatable kedalam postingan di blog. sebelum saya menerangkan langkah-langkah pemasangan Datatable di Blogger, mari kita simak terlebih dahulu beberapa fitur yang diberikan oleh Datatable Bootstrap ini.
1. Pagination
salah satu fitur datatable adalah Pagination, meskipun anda membuat banyak data dalam satu tabel, maka data tidak akan memanjang kebawah, tetapi datatable akan membuat halaman secara otomatis. Perpindahan antar halaman tidak membutuhkan refresh atau reload data. Sehingga sangat efisien untuk digunakan.
2. Pencarian Instan
Anda dapat melakukan pencarian data apa saja didalam tabel tanpa melakukan refresh page. Data langsung muncul didalam tabel ketika anda mengetik keyword di kotak pencarian.
3. Multi-column Ordering
Fitur ini memungkinkan untuk menyortir data untuk setiap kolom. Kita dapat menyortir data Ascending maupun Descending untuk setiap kolomnya.
4. Responsive
Datatable menggunakan CSS Bootstrap sehingga menghasilkan tampilan yang responsive menyesuaikan Browser dan Gatget.
Setelah memahami fitur - fitur Datatable, selanjutnya kita akan langsung memasangkan dengan Template Blogger. Perhatikan langkah - langkah berikut.
Siapkan dulu bahan - bahannya :
1. Bootstrap.min.css
2. dataTables.bootstrap.css
3. jquery-1.7.2.min.js
4. bootstrap.min.js
5. jquery.dataTables.min.js
6. dataTables.bootstrap.min.js
File-file diatas dapat anda download di Website Bootstrap dan DataTable langsung kemudian upload file-file diatas ke hosting file untuk dipanggil, bisa di Google Site, Yourjavascript atau mediafire.
Jika anda tidak ingin repot-repot anda bisa langsung menggunakan file hosting saya.
Langkah #1 :
Buka blogger anda kemudian menuju Edit Template, lalu cari kode </head>. letakkan kode berikut diatas kode </head>
<link href="https://sites.google.com/site/fasilkom12321/hosting/bootstrap.min.css" rel="stylesheet"></link> <link href="http://cdn.datatables.net/plug-ins/3cfcc339e89/integration/bootstrap/3/dataTables.bootstrap.css" rel="stylesheet" type="text/css"></link>
Langkah #2 :
Cari kode </body> kemudian letakan kode berikut diatas kode </body><script src="https://sites.google.com/site/fasilkom12321/hosting/jquery-1.7.2.min.js"></script> <script src="https://sites.google.com/site/fasilkom12321/hosting/bootstrap.min.js"></script> <script src="https://sites.google.com/site/fasilkom12321/hosting/jquery.dataTables.min.js"></script> <script src="https://sites.google.com/site/fasilkom12321/hosting/dataTables.bootstrap.min.js"></script>
Langkah #3 :
Letakkan kode jQuery berikut dibawah kode pada langkah 2.<script type="text/javascript">
$(function() {
$('#example1').dataTable(
{
"language": {
"decimal": "",
"emptyTable": "No data available in table",
"info": "Menampilkan _START_ - _END_ dari _TOTAL_ data",
"infoEmpty": "Menampilkan 0 - 0 dari 0 data",
"infoFiltered": "(Disaring _MAX_ data total)",
"infoPostFix": "",
"thousands": ",",
"lengthMenu": "Menampilkan _MENU_ data",
"loadingRecords": "Memuat...",
"processing": "Processing...",
"search": "Cari:",
"zeroRecords": "Tidak menemukan data yang sesuai",
"paginate": {
"first": "Awal",
"last": "Akhir",
"next": "Lanjut",
"previous": "Kembali"
},
"aria": {
"sortAscending": ": activate to sort column ascending",
"sortDescending": ": activate to sort column descending"
}
}
});
});
</script>
Kode diatas berfungsi sebagai kelas pemanggil DataTable yang akan dipanggil ke dalam postingan blog.
Langkah #4 :
Untuk membuat DataTable di postingan blog, gunakan mode HTML dan gunakan kode pemanggil tabel berikut :<table cellspacing="0" class="table table-striped table-bordered" id="example1" style="font-size: 12px; width: 100%px;">
<thead style="background-color: powderblue; font-weight: bold;">
<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>
Silahkan publish postingan dan jika berhasil , maka tabel akan ditampilkan dalam bentuk DataTables.
