Image Load

Hello world,

Melanjutkan pembahasan tentang Datatables, kali ini saya akan mulai part ke-2 kali ini dengan membahas styling pada Datatables. Ada banyak style datatables yang tersedia di website resminya. Akan tetapi yang akan saya bahas kali ini hanya yang Bootstrap 3 dan 4. Untuk memulai pembahasan ini saya sarankan untuk melihat dulu part pertama di sini karena di sini saya akan melanjutkan apa yang sudah ada di part pertama  tersebut.

Datatables + Bootstrap 3

Instalasi.

Pertama pastikan dulu kalian sudah menggunakan Bootstrap 3 pada website kalian. Kemudian untuk tahap ini kita akan menambahkan script dan mengganti beberapa  bagian  yang sudah ada di part pertama. Tambahkan sciprt berikut  di bawah Jquery.dataTables.min.js.

[removed][removed]

Kemudian ganti file cssnya dari

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

menjadi css berikut

<link href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap.min.css">


Hasilnya kira-kira akan menjadi seperti berikut.

Full Code:

<!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.21/css/dataTables.bootstrap.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





<!-- 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][removed]

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

</html>


Datatables + Bootstrap 4.

Instalasi.

Untuk bootstrap 4 kita akan gunakan script berikut setelah Jquery.dataTables.min.js.

[removed][removed]

Kemudian ganti cssnya  dengan css berikut.

<link href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css">

Hasilnya  kira-kira akan menjadi seperti berikut.


Full Code :

<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<title>Hello, world!</title>
</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





<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
[removed][removed]
[removed][removed]
[removed][removed]

[removed][removed]
[removed][removed]

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


Kira-kira seperti itulah penggunaannya. Hanya  dengan  mengganti file css dan js defaultnya saja. cukup mudah bukan?

Selamat mencoba:)