BREAKING NEWS

BLOG

ARTIKEL PUBLIK

SEO

Sunday, 9 July 2017

Memasang Datatable Bootstrap Responsive di Blogger


Memasang Datatable 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() {
                $(&#39;#example1&#39;).dataTable(
 {
  &quot;language&quot;: {
    &quot;decimal&quot;:        &quot;&quot;,
    &quot;emptyTable&quot;:     &quot;No data available in table&quot;,
    &quot;info&quot;:           &quot;Menampilkan _START_ - _END_ dari _TOTAL_ data&quot;,
    &quot;infoEmpty&quot;:      &quot;Menampilkan 0 - 0 dari 0 data&quot;,
    &quot;infoFiltered&quot;:   &quot;(Disaring _MAX_ data total)&quot;,
    &quot;infoPostFix&quot;:    &quot;&quot;,
    &quot;thousands&quot;:      &quot;,&quot;,
    &quot;lengthMenu&quot;:     &quot;Menampilkan _MENU_ data&quot;,
    &quot;loadingRecords&quot;: &quot;Memuat...&quot;,
    &quot;processing&quot;:     &quot;Processing...&quot;,
    &quot;search&quot;:         &quot;Cari:&quot;,
    &quot;zeroRecords&quot;:    &quot;Tidak menemukan data yang sesuai&quot;,
    &quot;paginate&quot;: {
        &quot;first&quot;:      &quot;Awal&quot;,
        &quot;last&quot;:       &quot;Akhir&quot;,
        &quot;next&quot;:       &quot;Lanjut&quot;,
        &quot;previous&quot;:   &quot;Kembali&quot;
    },
    &quot;aria&quot;: {
        &quot;sortAscending&quot;:  &quot;: activate to sort column ascending&quot;,
        &quot;sortDescending&quot;: &quot;: activate to sort column descending&quot;
    }
}
});
            });
        </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 akan tampil tabel seperti tabel berikut :


Rendering engine Browser Platform(s) Engine version CSS grade
Trident Internet Explorer 4.0 Win 95+ 4 X
Trident Internet Explorer 5.0 Win 95+ 5 C
Trident Internet Explorer 5.5 Win 95+ 5.5 A
Trident Internet Explorer 6 Win 98+ 6 A
Trident Internet Explorer 7 Win XP SP2+ 7 A
Trident AOL browser (AOL desktop) Win XP 6 A
Gecko Firefox 1.0 Win 98+ / OSX.2+ 1.7 A
Gecko Firefox 1.5 Win 98+ / OSX.2+ 1.8 A
Gecko Firefox 2.0 Win 98+ / OSX.2+ 1.8 A
Gecko Firefox 3.0 Win 2k+ / OSX.3+ 1.9 A
Gecko Mozilla 1.5 Win 95+ / OSX.1+ 1.5 A
Gecko Mozilla 1.6 Win 95+ / OSX.1+ 1.6 A
Gecko Mozilla 1.7 Win 98+ / OSX.1+ 1.7 A
Gecko Mozilla 1.8 Win 98+ / OSX.1+ 1.8 A
Gecko Seamonkey 1.1 Win 98+ / OSX.2+ 1.8 A
Gecko Epiphany 2.20 Gnome 1.8 A
Webkit Safari 1.2 OSX.3 125.5 A
Webkit Safari 1.3 OSX.3 312.8 A
Webkit Safari 2.0 OSX.4+ 419.3 A
Webkit Safari 3.0 OSX.4+ 522.1 A
Webkit OmniWeb 5.5 OSX.4+ 420 A
Webkit iPod Touch / iPhone iPod 420.1 A
Webkit S60 S60 413 A
Presto Opera 7.0 Win 95+ / OSX.1+ - A
Presto Opera 7.5 Win 95+ / OSX.2+ - A
Presto Opera 8.0 Win 95+ / OSX.2+ - A
Presto Opera 8.5 Win 95+ / OSX.2+ - A
Presto Opera 9.0 Win 95+ / OSX.3+ - A
Presto Opera 9.2 Win 88+ / OSX.3+ - A
Presto Opera 9.5 Win 88+ / OSX.3+ - A
Presto Opera for Wii Wii - A
Presto Nokia N800 N800 - A
Presto Nintendo DS browser Nintendo DS 8.5 C/A1
KHTML Konqureror 3.1 KDE 3.1 3.1 C
KHTML Konqureror 3.3 KDE 3.3 3.3 A
KHTML Konqureror 3.5 KDE 3.5 3.5 A
Tasman Internet Explorer 4.5 Mac OS 8-9 - X
Tasman Internet Explorer 5.1 Mac OS 7.6-9 1 C
Rendering engine Browser Platform(s) Engine version CSS grade

Post a Comment

 
Copyright © 2017 AKADEMI INFORMATIKA - Member of Rumah IT
Our Partners: Indonesia Travel Guide - ICT Computer - Safe Your Link Away. Powered byBlogger