Baca Juga :  Set Width Border Left CSS

jQuery AJAX Pagination

1 217

Dalam 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 mengklik setiap link, ia memanggil pawang AJAX untuk meminta hasil halaman terbatas dari database.

Langkah-langkah untuk mengimplementasikan pagination AJAX jQuery adalah,

  • Mengirimkan permintaan halaman via AJAX.
  • Hitung batas permintaan untuk mengambil data.
  • Buat link pagination dan terapkan gaya.
  • Tampilkan hasil dan link pagination.

Mengirim Permintaan Halaman via AJAX

Dalam kode ini, kami mengirimkan permintaan awal untuk sebuah halaman getresult.php. Halaman ini akan melakukan semua fungsi sisi server dan merespons permintaan pagination. Penangan AJAX memasukkan data respons ini ke dalam penyeleksi target.

<script>
function getresult(url) {    $.ajax({
	url: url,
	type: "GET",
	data:  {rowcount:$("#rowcount").val()},
	success: function(data){ $("#pagination").html(data); },
	error: function() {} 	        
   });
}
</script>
<div id="pagination">
<input type="hidden" name="rowcount" id="rowcount" />
</div>
<script>
getresult("getresult.php");
</script>

Kalkulasi Limit Query

Karena memuat sebagian besar data membutuhkan banyak waktu, pagination adalah untuk pengambilan / pemuatan cepat. Jadi, kita harus menghitung batas awal dan akhir berdasarkan permintaan halaman. Kode itu,

Baca Juga :  Background CSS
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=";					
$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);

Buat Link Pagination dan Terapkan Styles

Untuk membuat jumlah total link halaman, kita harus melewati hitungan hasil database jika sudah ditemukan.

if(empty($_GET["rowcount"])) {
$_GET["rowcount"] = $db_handle->numRows($sql);
}
$perpageresult = $perPage->perpage($_GET["rowcount"], $paginationlink);

Perpindahan fungsi akan menciptakan semua link pagination dan menerapkan gaya berdasarkan status halaman apakah itu aktif atau tidak berlaku. Kode itu,

function perpage($count,$href) {  
	$output = '';  
	if(!isset($_GET["page"])) 
		$_GET["page"] = 1;  
	if($this->perpage != 0) 
		$pages = ceil($count/$this->perpage);  
	if($pages>1) {    
		if($_GET["page"] == 1)      
			$output = $output . '<span class="disabled"><<</span><span class="disabled"><</span>';    
		else      
			$output = $output . '<a class="link" onclick="getresult(\'' . $href . (1) . '\')" ><<</a><a class="link" onclick="getresult(\'' . $href . ($_GET["page"]-1) . '\')" ><</a>';
			
	if(($_GET["page"]-3)>0) { 
		if($_GET["page"] == 1) $output = $output . '<span id=1 class="current">1</span>'; 
		else $output = $output . '<a class="link" onclick="getresult(\'' . $href . '1\')" >1</a>'; 
	} 
	if(($_GET["page"]-3)>1) { 
		$output = $output . '...';
	} 
	for($i=($_GET["page"]-2); $i<=($_GET["page"]+2); $i++) { 
		if($i<1) 
			continue; 
		if($i>$pages) 
			break; 
		if($_GET["page"] == $i) 
			$output = $output . '<span id='.$i.' class="current">'.$i.'</span>'; else $output = $output . '<a class="link" onclick="getresult(\'' . $href . $i . '\')" >'.$i.'</a>'; 
	} 
	if(($pages-($_GET["page"]+2))>1) { 
		$output = $output . '...'; 
	} 
	if(($pages-($_GET["page"]+2))>0) { 
		if($_GET["page"] == $pages) $output = $output . '<span id=' . ($pages) .' class="current">' . ($pages) .'</span>'; 
		else $output = $output . '<a class="link" onclick="getresult(\'' . $href . ($pages) .'\')" >' . ($pages) .'</a>'; 
	} 
	if($_GET["page"] < $pages) 
		$output = $output . '<a class="link" onclick="getresult(\'' . $href . ($_GET["page"]+1) . '\')" >></a><a class="link" onclick="getresult(\'' . $href . ($pages) . '\')" >>></a>'; 
	else 
		$output = $output . '<span class="disabled">></span><span class="disabled">>></span>'; 
	} 
	return $output; 
}

Tunjukkan Hasil dan Tautan Paginasi

Akhirnya script PHP yang diminta akan membentuk output HTML untuk mencetak hasil database dan link pagination.

$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="pagelink">' . $perpageresult . '</div>';
}
print $output;

Data yang tercetak di atas akan dibaca sebagai respon AJAX dan dimasukkan ke dalam selector target.

success: function(data){
	$("#pagination").html(data);
}
<div id="pagination">
// AJAX Response will be Inserted
</div>
Demo

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

1 Comment
  1. […] 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 […]

Leave A Reply

Your email address will not be published.

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