CARA MENGUNAKAN LIBRARY DATATABLES

Assalamualaikum warohmatullohi wabarokatuh,
Wa alaikum salam warohmatullohi wabarokatuh,

source logo : www.freebiesupply.com

Ditutorial jquery ini akan berbagi cara menampilkan data pada table menggunakan jquery DataTables , tentunya akan membutuhkan library jquery dan jquery dataTables nya disini. kalian bisa download langsung ke website resminya, baik langsung saja langkah awal adalah membuat database dulu berikut adalah struktur database nya sebelum menampilkan datanya ke dalam dataTables

Berikut kode awal nya yaitu berupa link dan source library DataTables

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css">

<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>

<script type="text/javascript" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>

Pada script ini untuk menampilkan data dari database nya pada dataTables, tentunya jangan lupa, untuk membuat script koneksi ke databasenya dulu, pada script di bawah ini sudah ada script terhubung dengan database

<table id="example" class="display" style="width:100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>City</th>
      <th>Country</th>
      <th>Date Birth</th>
    </tr>
  </thead>
  <tbody> 
    <?php 
	    $connection = mysqli_connect($server="localhost",$username="root",$password="",$database="test");
	?> 
	
	<?php 
		$query = "SELECT * FROM tb_users";
		$myq = mysqli_query($connection, $query);
		
		while( $row = mysqli_fetch_assoc($myq) ){
	?> 
	
	<tr>
      <td> <?php echo $row['name']; ?> </td>
      <td> <?php echo $row['city']; ?> </td>
      <td> <?php echo $row['country']; ?> </td>
      <td> <?php echo $row['date_birth']; ?> </td>
    </tr> 
    <?php } ?> 
    </tbody>
  <tfoot>
    <tr>
      <th>Name</th>
      <th>City</th>
      <th>Country</th>
      <th>Date Birth</th>
    </tr>
  </tfoot>
</table>

Pada script berikut adalah script jquery untuk memanggil fungsi-fungsi dataTables nya sesuaikan dengan nama atribut pada tag Table nya, pada tag Table nya saya memberi nama id="example" maka pada script ini di ketik $("#example").DataTable();

<script type="text/javascript">
   
   $(document).ready(function() {
      $('#example').DataTable();
   });
   
</script>

berikut Hasilnya :

Terima Kasih
Thank's


TAG TAGS :

CARA Mengunakan Library DataTabales | CARA Mengunakan Library DataTabales Pada JQUERY | DataTables dengan menggunakan JQUERY | DataTables Libarry DENGAN JQUERY | JQUERY LIBRARY | DataTables Library | LANGSUNGKODING |

BACA JUGA :

• C.R.U.D AJAX dengan php