Cara Membuat Pagination dengan Ajax jQuery

Pagination adalah sebuah tombol dimana berfungsi untuk membagi data yang kita tampilkan lalu data sisanya akan kita lihat ketika kita mengklik tombol next atau prev seperti itu, dengan pagination kita juga mencegah data kita tampil lebih banyak, bayangkan saja misal data kita ribuan dan ketika kita tampilkan maka data ribuan itu akan sampai scroll mengecil jadi tidak bagus bukan dan itu lah fungsinya pagination, oke seperti apa cara membuat pagination dengan Ajax jQuery, simak terus ya teman-teman.

Untuk cara membuat pagination dengan Ajax jQuery saya tidak menggunakan dengan menampilkan data yang saya gunakan kemarin ya, disini cara itu sudah saya ganti karena kita akan langsung menampilkannya dengan pagination. Oke langsun saja ya, disini saya menggunakan templatenya seperti ini, sama seperti kemarin kita menggunakan tbody ya.

<table class="table table-bordered">
	<thead>
		<tr class="thead-dark">
			<th>No</th>
			<th>Title</th>
			<th>Body</th>
			<th>Tanggal Pembuatan</th>
		</tr>
	</thead>
	<tbody></tbody>
</table>

oke jika sudah kita langsung liat ajaxnya seperti ini:

$(document).ready(function(){
	app.show(1)
})
var app = {
	show: function(pagenum){
		$("tbody").html("")
		$.ajax({
			url: 'data.php?page='+pagenum,
			method : 'POST',
			success: function(response){
				$("tbody").html(response)
			}
		})	
	}
}

Jika sudah sekarang kita ke webservicenya langsung ya seperti ini:

<?php  
$con = mysqli_connect("localhost", "root", "", "ajax_dmt");

$q1 = mysqli_query($con, "SELECT * FROM posts");
$total_artikel = mysqli_num_rows($q1);

$per_page = 4;
$page = $_REQUEST["page"];

if($page == 0 or $page == ""){
	$page = 1;
}

$page = $page - 1;

$p = $page * $per_page;

$query = mysqli_query($con, "SELECT * FROM posts LIMIT $p, $per_page "); // ofse $p // limit $row
?>

<table border="1">
<?php  
	if(mysqli_num_rows($query)){
		$no = 1;
		while($row = mysqli_fetch_array($query)){
?>
<tr>
	<td><?php echo $no; ?></td>
	<td><?php echo $row["title"] ?></td>
	<td><?php echo $row["body"] ?></td>
	<td><?php echo $row["created_at"] ?></td>
</tr>
<?php 
	$no++;	}
	}
?>
</table>
<td colspan="4">
<?php 
if($_REQUEST["page"] > 1){
	$prev_page = $_REQUEST["page"] - 1;
	echo '<button onclick="app.show('.$prev_page.')" class="btn btn-primary"><< prev </button>';
}else{
	echo '<button class="btn btn-danger disabled" style="cursor:no-drop"><< prev </button>';
}
$check = $p + $per_page;
if($total_artikel > $check){
	$next_page = $_REQUEST["page"] + 1;
	echo '<button onclick="app.show('.$next_page.')"  class="btn btn-primary float-right">next >></button>';
}else{
	echo '<button class="btn btn-danger disabled float-right" style="cursor:no-drop"> Next >> </button>';
}
?>
</td>

Silahkan teman-teman copy dan langsung lihat hasilnya, maka jika berhasil maka akan tampil seperti ini

oke menarik bukan oke seperti itu saja belajar kita tentang cara membuat pagination dengan Ajax jQuery, semoga bermanfaat dan sampai jumpa pada artikel berikutnya terimakasih.

Cara Membuat Pagination dengan Ajax jQuery

Kategori