[Plugins][3] Membuat Tabel dengan Datatables

Monday, 03 Jun 2019 | By Riza

Image Load

Hello world,

Dalam membuat website atau aplikasi lainnya kita sering menemui dan membuat tabel sebagai interface untuk menampilkan data. Semakin lama bentuk dan fitur dalam tabel yang semakin banyak akhirnya dibutuhkan-lah plugin-plugin tertentu yang mampu mempermudah developer untuk membuat website. Salah satunya yang kita bahas kali ini adalah adanya plugin Jquery yang bernama DataTables. DataTables adalah plugin Jquery yang mampu memberikan fitur canggih dalam sebuah tabel. Fitur-fitur tersebut diantaranya :

  1. Pagination
  2. Instan Search
  3. Multi-column Ordering
  4. Use Almost Any Data Source
  5. Easy Theme-able
  6. Mobile Friendly
  7. Free open source software


Tahap Instalasi

Langkah pertama yang harus dilakukan adalah menambahkan beberapa file sebagai berikut:

1. Jquery.min.js

https://code.jquery.com/jquery-3.3.1.js

2. Jquery.dataTables.min.js

https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js

3. Jquery.dataTables.min.css

https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css


Inisiasi Jquery

$(document).ready(function() {
$('#example').DataTable();
});

Dengan inisiasi di atas maka setiap tabel yang memiliki id #example akan berubah menjadi datatables.

Membuat Tabel

Setelah tahap instalasi selesai kita sudah dapat memulai untuk membuat tabel. Sebagai contoh di bawah ini saya buat sebuah tabel sederhana.

example" class="table display" style="width:100%">




























































































































Name Position Office Age Start date Salary
Tiger Nixon System Architect Edinburgh 61 2011/04/25 $320,800
Garrett Winters Accountant Tokyo 63 2011/07/25 $170,750
Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 $86,000
Cedric Kelly Senior Javascript Developer Edinburgh 22 2012/03/29 $433,060
Airi Satou Accountant Tokyo 33 2008/11/28 $162,700
Brielle Williamson Integration Specialist New York 61 2012/12/02 $372,000
Herrod Chandler Sales Assistant San Francisco 59 2012/08/06 $137,500
Rhona Davidson Integration Specialist Tokyo 55 2010/10/14 $327,900
Colleen Hurst Javascript Developer San Francisco 39 2009/09/15 $205,500
Sonya Frost Software Engineer Edinburgh 23 2008/12/13 $103,600
Jena Gaines Office Manager London 30 2008/12/19 $90,560
Quinn Flynn Support Lead Edinburgh 22 2013/03/03 $342,000
Charde Marshall Regional Director San Francisco 36 2008/10/16 $470,600
Haley Kennedy Senior Marketing Designer London 43 2012/12/18 $313,500


Full Codenya  akan menjadi  seperti berikut.


<!doctype html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>

<!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
</head>

<body>

Hello, world!



































































































































Name Position Office Age Start date Salary
Tiger Nixon System Architect Edinburgh 61 2011/04/25 $320,800
Garrett Winters Accountant Tokyo 63 2011/07/25 $170,750
Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 $86,000
Cedric Kelly Senior Javascript Developer Edinburgh 22 2012/03/29 $433,060
Airi Satou Accountant Tokyo 33 2008/11/28 $162,700
Brielle Williamson Integration Specialist New York 61 2012/12/02 $372,000
Herrod Chandler Sales Assistant San Francisco 59 2012/08/06 $137,500
Rhona Davidson Integration Specialist Tokyo 55 2010/10/14 $327,900
Colleen Hurst Javascript Developer San Francisco 39 2009/09/15 $205,500
Sonya Frost Software Engineer Edinburgh 23 2008/12/13 $103,600
Jena Gaines Office Manager London 30 2008/12/19 $90,560
Quinn Flynn Support Lead Edinburgh 22 2013/03/03 $342,000
Charde Marshall Regional Director San Francisco 36 2008/10/16 $470,600
Haley Kennedy Senior Marketing Designer London 43 2012/12/18 $313,500





<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
[removed][removed]
<!-- Include all compiled plugins (below), or include individual files as needed -->
[removed][removed]
[removed][removed]

[removed]
$(document).ready(function() {
$('#example').DataTable();
});
[removed]
</body>

</html>
Selamat mencoba :)