Cara Install Jquery Data Table
Jquery Data Table adalah sebuah plugin yang di bikin dengan menggunakan jquery, plugin ini amat lah bermanfaat bagi membangun sortir data seketika tanpa mereload satu halaman dan kita hanya tinggal mengetikan pencarian kita di input dan datanya seketika secara realtime terpanggil, menarik bukan. Tentu plugin ini sangatlah menolong untuk kita selaku pengembang laman karena kita hanya tinggal menginstall pluginnya di laman kita, disamping itu pun proses konfigurasinya amat sangatlah gampang dapat di bilang zero configuration, kalian dapat 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>Aplikasi 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>Aplikasi 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>
lumayan 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 menurut nama atau jabatan atau umur atau sesuai tabel heading yang di bikin, karenanya hasilnya akan seketika dikala itu pun di tampilkan tanpa mereload satu halaman laman.
oke demikianlah panduan Cara Install Jquery Data Table semoga bermanfaat yah.. 😀
Sumber https://kursuswebsite.org
