Membuat Pagination AJAX dengan PHP

1 333

Dalam tutorial ini, kita akan melihat contoh kode PHP untuk menambahkan pagination ke daftar record yang diambil dari database. Saya menggunakan AJAX untuk mengambil catatan untuk setiap halaman dari database dengan jQuery. Dalam tutorial sebelumnya, kita sudah melihat tentang pagination AJAX. Dalam contoh ini, saya telah menambahkan opsi untuk memilih format pagination dan juga saya telah mengubah tampilan dan nuansa untuk memperkaya desain per halaman.

Dalam contoh ini, kita memiliki dua pilihan berdasarkan format pagination yang akan diubah. Salah satunya hanya menampilkan link Prev and Next untuk menavigasi bolak-balik ke halaman sebelumnya dan berikutnya. Format lainnya menampilkan semua link halaman dan juga dengan link untuk menavigasi ke halaman pertama, terakhir, sebelumnya dan berikutnya.

Kode HTML untuk Memilih Format Pagination

Kode berikut menunjukkan dropdown dengan dua opsi untuk format pagination. Format defaultnya adalah menampilkan semua link per halaman. Kami memanggil jQuery untuk mengubah format pagination pada acara perubahan pilihan dropdown.

<div id="overlay"><div><img src="loading.gif" width="64px" height="64px"/></div></div>
<div class="page-content">
	<div style="border-bottom: #F0F0F0 1px solid;margin-bottom: 15px;">
	Pagination Setting:<br> <select name="pagination-setting" onChange="changePagination(this.value);" class="pagination-setting" id="pagination-setting">
	<option value="all-links">Display All Page Link</option>
	<option value="prev-next">Display Prev Next Only</option>
	</select>
	</div>
	
	<div id="pagination-result">
	<input type="hidden" name="rowcount" id="rowcount" />
	</div>
</div>

Tampilan Hasil Paginasi via AJAX

Kami memiliki fungsi jQuery untuk mengirim panggilan AJAX ke PHP untuk mendapatkan hasil pagination. Kami memanggil fungsi ini di dua tempat. Salah satunya adalah pada perubahan pengaturan pengaturan pagination untuk memperbarui format pagination. Panggilan lainnya adalah dengan mengklik link pagination untuk menampilkan hasil halaman saat ini dan untuk menyorot halaman yang dipilih saat ini.

Baca Juga :  Baca Atribut Data HTML5 melalui jQuery
<script>
function getresult(url) {
	$.ajax({
		url: url,
		type: "GET",
		data:  {rowcount:$("#rowcount").val(),"pagination_setting":$("#pagination-setting").val()},
		beforeSend: function(){$("#overlay").show();},
		success: function(data){
		$("#pagination-result").html(data);
		setInterval(function() {$("#overlay").hide(); },500);
		},
		error: function() 
		{} 	        
   });
}
function changePagination(option) {
	if(option!= "") {
		getresult("getresult.php");
	}
}
</script>

Proses Permintaan Pagination AJAX di PHP

Kode berikut membaca semua parameter seperti halaman saat ini, pengaturan pagination yang dikirim oleh panggilan AJAX. Berdasarkan parameter ini script PHP memanggil fungsi pagination untuk membentuk respon AJAX.

<?php
	require_once("dbcontroller.php");
	require_once("pagination.class.php");
	
	$db_handle = new DBController();
	$perPage = new PerPage();

	$sql = "SELECT * from php_interview_questions";
	$paginationlink = "getresult.php?page=";	
	$pagination_setting = $_GET["pagination_setting"];
					
	$page = 1;
	if(!empty($_GET["page"])) {
	$page = $_GET["page"];
	}

	$start = ($page-1)*$perPage->perpage;
	if($start < 0) $start = 0;

	$query =  $sql . " limit " . $start . "," . $perPage->perpage; 
	$faq = $db_handle->runQuery($query);

	if(empty($_GET["rowcount"])) {
	$_GET["rowcount"] = $db_handle->numRows($sql);
	}
	if($pagination_setting == "prev-next") {
		$perpageresult = $perPage->getPrevNext($_GET["rowcount"], $paginationlink,$pagination_setting);	
	} else {
		$perpageresult = $perPage->getAllPageLinks($_GET["rowcount"], $paginationlink,$pagination_setting);	
	}


	$output = '';
	foreach($faq as $k=>$v) {
	 $output .= '<div class="question"><input type="hidden" id="rowcount" name="rowcount" value="' . $_GET["rowcount"] . '" />' . $faq[$k]["question"] . '</div>';
	 $output .= '<div class="answer">' . $faq[$k]["answer"] . '</div>';
	}
	if(!empty($perpageresult)) {
	$output .= '<div id="pagination">' . $perpageresult . '</div>';
	}
	print $output;
?>
Demo

Get real time updates directly on you device, subscribe now.

1 Comment
  1. […] tutorial ini, kita akan melihat kode sederhana untuk pagination menggunakan jQuery AJAX dan PHP. Kode ini akan memiliki link pagination pertama, terakhir, sebelumnya, berikutnya dan lainnya. Saat […]

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.