Jquery Data Table merupakan plugin yang di buat dengan menggunakan jquery, plugin ini sangat lah berguna untuk membuat sortir data langsung tanpa mereload satu halaman dan kita hanya tinggal mengetikan pencarian kita di input dan datanya langsung secara realtime terpanggil, menarik bukan. Tentu plugin ini sangatlah membantu bagi kita sebagai pengembang website karena kita hanya tinggal menginstall pluginnya di website kita, disamping itu juga proses konfigurasinya sangat sangatlah mudah bisa di bilang zero configuration, kalian bisa lihat di websitenya https://datatables.net/examples/basic_init/zero_configuration.html .
Baiklah tanpa berlama lama kali ini saya akan menjelaskan bagaimana Cara Install Jquery Data Table , mari kita praktekan teman teman.
<!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">
<title>Data Table Bootstrap</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
<h2 class="text-info text-center">Jquery Data Table Bootstrap</h2>
<div class="panel panel-default">
<div class="panel-body">
<div class="table-responsive">
<table id="example" class="table table-striped table-bordered" width="100%" cellspacing="0">
<thead>
<tr>
<th>Nama</th>
<th>Jabatan</th>
<th>Office</th>
<th>Umur</th>
<th>Gaji</th>
</tr>
</thead>
<tbody>
<tr>
<td>Makmur Tobing</td>
<td>Project Manager</td>
<td>Jakarta</td>
<td>61</td>
<td>Rp. 10000000</td>
</tr>
<tr>
<td>Mela Lismawati</td>
<td>Akuntan</td>
<td>Surabaya</td>
<td>35</td>
<td>Rp. 500000</td>
</tr>
<tr>
<td>Bela Virsa</td>
<td>Junior Programming</td>
<td>Jakarta</td>
<td>27</td>
<td>Rp. 4500000</td>
</tr>
<tr>
<td>Muhammad Jupri</td>
<td>Senior Javascript Developer</td>
<td>Bekasi</td>
<td>37</td>
<td>Rp. 7000000</td>
</tr>
<tr>
<td>Andri Siahaan</td>
<td>Manager Produksi</td>
<td>Medan</td>
<td>33</td>
<td>Rp. 15000000</td>
</tr>
<tr>
<td>Firdaus Asmara</td>
<td>Junior Programming PHP</td>
<td>Padang</td>
<td>45</td>
<td>Rp. 10000000</td>
</tr>
<tr>
<td>Ambar Sutaya</td>
<td>Manager Marketing</td>
<td>Semarang</td>
<td>40</td>
<td>Rp. 17000000</td>
</tr>
<tr>
<td>Roni Sahroni</td>
<td>Sales Marketing</td>
<td>Bogor</td>
<td>35</td>
<td>Rp. 3500000</td>
</tr>
<tr>
<td>Beri Sujana</td>
<td>Javascript Developer</td>
<td>Tangerang</td>
<td>39</td>
<td>Rp. 7000000</td>
</tr>
<tr>
<td>Dena Ferdana</td>
<td>Software Engineer</td>
<td>Serang</td>
<td>23</td>
<td>Rp. 6000000</td>
</tr>
<tr>
<td>Zulkarnain</td>
<td>Office Manager</td>
<td></td>
<td>30</td>
<td>$90,560</td>
</tr>
<tr>
<td>Muhammad Alfi</td>
<td>Engineer</td>
<td>Lampung</td>
<td>35</td>
<td>Rp. 500000</td>
</tr>
<tr>
<td>Eya Virsa</td>
<td>Junior PHP</td>
<td>Jakarta</td>
<td>27</td>
<td>Rp. 4500000</td>
</tr>
<tr>
<td>Masrizal Chan</td>
<td>Senior PHP Developer</td>
<td>Bandung</td>
<td>37</td>
<td>Rp. 10000000</td>
</tr>
<tr>
<td>Helmi Utara</td>
<td>Manager Kosan</td>
<td>Medan</td>
<td>33</td>
<td>Rp. 15000000</td>
</tr>
<tr>
<td>Anjasmara </td>
<td>Junior Programming PHP</td>
<td>Padang</td>
<td>45</td>
<td>Rp. 10000000</td>
</tr>
<tr>
<td>Robi Marlin</td>
<td>Manager Marketing</td>
<td>Semarang</td>
<td>40</td>
<td>Rp. 17000000</td>
</tr>
<tr>
<td>Joko Monako</td>
<td>Sales Executive</td>
<td>Bogor</td>
<td>35</td>
<td>Rp. 3500000</td>
</tr>
<tr>
<td>Nursalim</td>
<td>Javascript Developer</td>
<td>Tangerang</td>
<td>39</td>
<td>Rp. 7000000</td>
</tr>
<tr>
<td>Koswara</td>
<td>Software Engineer</td>
<td>Serang</td>
<td>23</td>
<td>Rp. 6000000</td>
</tr>
<tr>
<td>Zakaria </td>
<td>Office Manager</td>
<td></td>
<td>30</td>
<td>$90,560</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="col-md-2"></div>
</div>
</div>
</body>
</html>
cukup lumayan panjang yah teman teman, karena disiini kira mencontohkan banyak table yang akan kita tampilkan.
lalu setelah itu kalian ketikan script Javascript di bawah ini sebelum tag penutup </body> yah, lalu save.
<!– jQuery (necessary for Bootstrap’s JavaScript plugins) –>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js”></script>
<!– Latest compiled and minified JavaScript –>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js” integrity=”sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa” crossorigin=”anonymous”></script>
<script src=”https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js”></script>
<script src=”https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap.min.js”></script>
<script>
$(document).ready(function() {
$(‘#example’).DataTable();
});
</script>
tampilannya akan seperti di bawah ini.
ketika kalian ketikan pencarian berdasarkan nama atau jabatan atau umur atau sesuai tabel heading yang di buat, maka hasilnya akan langsung saat itu juga di tampilkan tanpa mereload satu halaman website.
oke sekian tutorial Cara Install Jquery Data Table semoga bermanfaat yah.. 
The post Cara Install Jquery Data Table appeared first on Kursus Website Terbaik.