Homepage / Indonesian / Kode Dasar DataTables jQuery + Bootstrap

Kode Dasar DataTables jQuery + Bootstrap

By adminPosted on December 1, 2023August 30, 2024

Kode Dasar DataTables Laravel jQuery + Bootstrap

Dalam dunia pengembangan web, menampilkan data secara rapi dan interaktif adalah salah satu aspek yang sangat penting. Di sinilah DataTables, sebuah plugin jQuery yang dapat membuat proses interaktif dan menampilkan data secara rapi tabel. Dalam artikel ini, saya menyediakan Kode Dasar DataTables Laravel jQuery + Bootstrap.

Table of Contents

Fitur Utama DataTables:

1. Pengurutan (Sorting):

DataTables dapat memberikan kepada pengguna untuk melakukan sorting kolom dalam urutan dari besar ke kecil mupun sebalumnya. Fitur ini penting untuk navigasi melalui dataset besar secara efisien.

2. Pencarian (Searching):

DataTables juga ada fungsionalitas pencarian, memungkinkan kita dengan cepat mendapatkan data tertentu dalam tabel berdasarkan key yang kita masukkan. Form pencarian secara dinamis memfilter tabel berdasarkan input pengguna.

3. Paginasi (Pagination):

Jika kita memiliki jumlah data yang besar, datatables dapat memberikan pagination bawaan, yang dapat membuat kita menavigasi melalui berbagai halaman data, meningkatkan waktu pemuatan.

4. Desain Responsif (Responsive Design):

DataTables bisa juga digunakan untuk halaman yang responsive yang secara otomatis menyesuaikan tata letak tabel berdasarkan ukuran layar.

5. Penyesuaian (Customization):

Sebagai programmer, kita memiliki fleksibilitas untuk menyesuaikan tampilan dan perilaku DataTables. Baik itu mengatur jumlah baris yang ditampilkan, memodifikasi gaya, atau menambahkan tombol kustom, DataTables menyediakan berbagai opsi yang dapat diatur berdasarkan kode.

Kode Dasar DataTables

Untuk itu, ayo copy kode program berikut ini dan tampilkan ke browser:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Your Page Title</title>
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    />
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdn.datatables.net/v/bs4/dt-1.10.20/datatables.min.css"
    />
  </head>
  <body>
    <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>Camino 1.0</td>
          <td>OSX.2+</td>
          <td>1.8</td>
          <td>A</td>
        </tr>
        <tr>
          <td>Gecko</td>
          <td>Camino 1.5</td>
          <td>OSX.3+</td>
          <td>1.8</td>
          <td>A</td>
        </tr>
        <tr>
          <td>Gecko</td>
          <td>Netscape 7.2</td>
          <td>Win 95+ / Mac OS 8.6-9.2</td>
          <td>1.7</td>
          <td>A</td>
        </tr>
        <tr>
          <td>Gecko</td>
          <td>Netscape Browser 8</td>
          <td>Win 98SE+</td>
          <td>1.7</td>
          <td>A</td>
        </tr>
        <tr>
          <td>Gecko</td>
          <td>Netscape Navigator 9</td>
          <td>Win 98+ / OSX.2+</td>
          <td>1.8</td>
          <td>A</td>
        </tr>
        <tr>
          <td>Gecko</td>
          <td>Mozilla 1.0</td>
          <td>Win 95+ / OSX.1+</td>
          <td>1</td>
          <td>A</td>
        </tr>
        <tr>
          <td>Gecko</td>
          <td>Mozilla 1.1</td>
          <td>Win 95+ / OSX.1+</td>
          <td>1.1</td>
          <td>A</td>
        </tr>
        <tr>
          <td>Gecko</td>
          <td>Mozilla 1.2</td>
          <td>Win 95+ / OSX.1+</td>
          <td>1.2</td>
          <td>A</td>
        </tr>
        <tr>
          <td>Gecko</td>
          <td>Mozilla 1.3</td>
          <td>Win 95+ / OSX.1+</td>
          <td>1.3</td>
          <td>A</td>
        </tr>
        <tr>
          <td>Gecko</td>
          <td>Mozilla 1.4</td>
          <td>Win 95+ / OSX.1+</td>
          <td>1.4</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>
        <tr>
          <td>Tasman</td>
          <td>Internet Explorer 5.2</td>
          <td>Mac OS 8-X</td>
          <td>1</td>
          <td>C</td>
        </tr>
        <tr>
          <td>Misc</td>
          <td>NetFront 3.1</td>
          <td>Embedded devices</td>
          <td>-</td>
          <td>C</td>
        </tr>
        <tr>
          <td>Misc</td>
          <td>NetFront 3.4</td>
          <td>Embedded devices</td>
          <td>-</td>
          <td>A</td>
        </tr>
        <tr>
          <td>Misc</td>
          <td>Dillo 0.8</td>
          <td>Embedded devices</td>
          <td>-</td>
          <td>X</td>
        </tr>
        <tr>
          <td>Misc</td>
          <td>Links</td>
          <td>Text only</td>
          <td>-</td>
          <td>X</td>
        </tr>
        <tr>
          <td>Misc</td>
          <td>Lynx</td>
          <td>Text only</td>
          <td>-</td>
          <td>X</td>
        </tr>
        <tr>
          <td>Misc</td>
          <td>IE Mobile</td>
          <td>Windows Mobile 6</td>
          <td>-</td>
          <td>C</td>
        </tr>
        <tr>
          <td>Misc</td>
          <td>PSP browser</td>
          <td>PSP</td>
          <td>-</td>
          <td>C</td>
        </tr>
        <tr>
          <td>Other browsers</td>
          <td>All others</td>
          <td>-</td>
          <td>-</td>
          <td>U</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>

    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script
      src="https://cdn.datatables.net/v/bs4/dt-1.10.20/datatables.min.js"
      defer
    ></script>

    <script>
      $(function () {
        $("#example1").DataTable();
      });
    </script>
  </body>
</html>

Hasilnya adalah pada gambar diawal artikel ini. Dalam contoh ini, saya telah menyertakan file CSS dan JavaScript DataTables dari CDN. Tabel dengan ID ‘example1‘ kemudian dipanggil dan akan menampilkan semua data. Your Page Title

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	Camino 1.0	OSX.2+	1.8	A
Gecko	Camino 1.5	OSX.3+	1.8	A
Gecko	Netscape 7.2	Win 95+ / Mac OS 8.6-9.2	1.7	A
Gecko	Netscape Browser 8	Win 98SE+	1.7	A
Gecko	Netscape Navigator 9	Win 98+ / OSX.2+	1.8	A
Gecko	Mozilla 1.0	Win 95+ / OSX.1+	1	A
Gecko	Mozilla 1.1	Win 95+ / OSX.1+	1.1	A
Gecko	Mozilla 1.2	Win 95+ / OSX.1+	1.2	A
Gecko	Mozilla 1.3	Win 95+ / OSX.1+	1.3	A
Gecko	Mozilla 1.4	Win 95+ / OSX.1+	1.4	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/A¹
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
Tasman	Internet Explorer 5.2	Mac OS 8-X	1	C
Misc	NetFront 3.1	Embedded devices	–	C
Misc	NetFront 3.4	Embedded devices	–	A
Misc	Dillo 0.8	Embedded devices	–	X
Misc	Links	Text only	–	X
Misc	Lynx	Text only	–	X
Misc	IE Mobile	Windows Mobile 6	–	C
Misc	PSP browser	PSP	–	C
Other browsers	All others	–	–	U
Rendering engine	Browser	Platform(s)	Engine version	CSS grade

Baca juga: Datatables Laravel 10 Yajra

Semoga artikel Kode Dasar DataTables Laravel jQuery + Bootstrap ini bermanfaat

Related