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 :
- Pagination
- Instan Search
- Multi-column Ordering
- Use Almost Any Data Source
- Easy Theme-able
- Mobile Friendly
- 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>Selamat mencoba :)
<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>