Tutorial membuat Pagination PHP, PDO dan JQuery

Kali akan membahas suatu tutorial membuat pagination atau halaman suatu website dengan php,pdo dan jquery. dengan adanya paginasi membuat tampilan data atau website artikel lebih rapi dan tidak merusak pandangan pembaca.Langsung saja berikut cara membuatnya.

berikut codenya.

	<!-- buat file dengan nama index.php -->
	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
	<title>Pagination Using PHP,PDO and JQuery \| stepblogging.com</title>
	<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
	<style>
	div.pagination {
	padding: 3px;
	margin: 3px;
	text-align:center;
	font-family:tahoma;
	font-size:12px;
	}

	div.pagination a {
	padding: 2px 5px 2px 5px;
	margin: 2px;
	border: 1px solid #007799;
	text-decoration: none;
	color: #006699;
	}
	div.pagination a:hover, div.digg a:active {
	border: 1px solid #006699;
	color: #000;
	}
	div.pagination span.current {
	padding: 2px 5px 2px 5px;
	margin: 2px;
	border: 1px solid #006699;
	font-weight: bold;
	background-color: #006699;
	color: #FFF;
	}
	div.pagination span.disabled {
	padding: 2px 5px 2px 5px;
	margin: 2px;
	border: 1px solid #EEE;
	color: #DDD;
	}
	</style>


	<script type="text/javascript">
	$(document).ready(function(){
	change_page('0');
	});
	function change_page(page_id){
	$(".flash").show();
	$(".flash").fadeIn(400).html('Loading <img src="ajax-loader.gif" />');
	var data_string = 'page_id='+ page_id;
	$.ajax({
	type: "POST",
	url: "load_data.php",
	data: dataString,
	cache: false,
	success: function(result){
	$(".flash").hide();
	$("#page_data").html(result);
	}
	});
	}
	</script>
	</head>
	<body>
	<h1>Pagination Using PHP, PDO and JQuery</h1>
	<div id="page_data"></div>
	<span class="flash"></span>
	</body>
	</html>

view raw index.php hosted with ❤ by GitHub

	<?php
	//buat file dengan nama load_data.php
	//DB configuration Constants
	define('_HOST_NAME_', 'localhost');
	define('_USER_NAME_', 'XXXXXXXX');
	define('_DB_PASSWORD', 'XXXXXXXX');
	define('_DATABASE_NAME_', 'XXXXXXX');

	//PDO Database Connection
	try {
	$databaseConnection = new PDO('mysql:host='._HOST_NAME_.';dbname='._DATABASE_NAME_, _USER_NAME_, _DB_PASSWORD);
	$databaseConnection->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
	} catch(PDOException $e) {
	echo 'ERROR: ' . $e->getMessage();
	}

	$sqlQuery = $databaseConnection->query("SELECT * FROM tbl_pagination");
	$count = $sqlQuery->rowCount();

	$adjacents = 2;
	$records_per_page = 5;

	$page = (int) (isset($_POST['page_id']) ? $_POST['page_id'] : 1);
	$page = ($page == 0 ? 1 : $page);
	$start = ($page-1) * $records_per_page;

	$next = $page + 1;
	$prev = $page - 1;
	$last_page = ceil($count/$records_per_page);
	$second_last = $last_page - 1;


	$pagination = "";
	if($last_page > 1){
	$pagination .= "<div class='pagination'>";
	if($page > 1)
	$pagination.= "<a href='javascript:void(0);' onClick='change_page(1);'>« First</a>";
	else
	$pagination.= "<span class='disabled'>« First</span>";

	if ($page > 1)
	$pagination.= "<a href='javascript:void(0);' onClick='change_page(".($prev).");'>« Previous  </a>";
	else
	$pagination.= "<span class='disabled'>« Previous  </span>";

	if ($last_page < 7 + ($adjacents * 2))
	{
	for ($counter = 1; $counter <= $last_page; $counter++)
	{
	if ($counter == $page)
	$pagination.= "<span class='current'>$counter</span>";
	else
	$pagination.= "<a href='javascript:void(0);' onClick='change_page(".($counter).");'>$counter</a>";

	}
	}
	elseif($last_page > 5 + ($adjacents * 2))
	{
	if($page < 1 + ($adjacents * 2))
	{
	for($counter = 1; $counter < 4 + ($adjacents * 2); $counter++)
	{
	if($counter == $page)
	$pagination.= "<span class='current'>$counter</span>";
	else
	$pagination.= "<a href='javascript:void(0);' onClick='change_page(".($counter).");'>$counter</a>";
	}
	$pagination.= "...";
	$pagination.= "<a href='javascript:void(0);' onClick='change_page(".($second_last).");'> $second_last</a>";
	$pagination.= "<a href='javascript:void(0);' onClick='change_page(".($last_page).");'>$last_page</a>";

	}
	elseif($last_page - ($adjacents * 2) > $page && $page > ($adjacents * 2))
	{
	$pagination.= "<a href='javascript:void(0);' onClick='change_page(1);'>1</a>";
	$pagination.= "<a href='javascript:void(0);' onClick='change_page(2);'>2</a>";
	$pagination.= "...";
	for($counter = $page - $adjacents; $counter <= $page + $adjacents; $counter++)
	{
	if($counter == $page)
	$pagination.= "<span class='current'>$counter</span>";
	else
	$pagination.= "<a href='javascript:void(0);' onClick='change_page(".($counter).");'>$counter</a>";
	}
	$pagination.= "..";
	$pagination.= "<a href='javascript:void(0);' onClick='change_page(".($second_last).");'>$second_last</a>";
	$pagination.= "<a href='javascript:void(0);' onClick='change_page(".($last_page).");'>$last_page</a>";
	}
	else
	{
	$pagination.= "<a href='javascript:void(0);' onClick='change_page(1);'>1</a>";
	$pagination.= "<a href='javascript:void(0);' onClick='change_page(2);'>2</a>";
	$pagination.= "..";
	for($counter = $last_page - (2 + ($adjacents * 2)); $counter <= $last_page; $counter++)
	{
	if($counter == $page)
	$pagination.= "<span class='current'>$counter</span>";
	else
	$pagination.= "<a href='javascript:void(0);' onClick='change_page(".($counter).");'>$counter</a>";
	}
	}
	}
	if($page < $counter - 1)
	$pagination.= "<a href='javascript:void(0);' onClick='change_page(".($next).");'>Next »</a>";
	else
	$pagination.= "<span class='disabled'>Next »</span>";

	if($page < $last_page)
	$pagination.= "<a href='javascript:void(0);' onClick='change_page(".($last_page).");'>Last »</a>";
	else
	$pagination.= "<span class='disabled'>Last »</span>";

	$pagination.= "</div>";
	}


	$records = $databaseConnection->query("SELECT * FROM tbl_pagination LIMIT $start, $records_per_page");
	$count = $records->rowCount();
	$HTML='';
	if($count > 0)
	{
	foreach($records as $row) {
	$HTML.='<div>';
	$HTML.= $row['first_name'];
	$HTML.='</div><br/>';
	}
	}
	else
	{
	$HTML='No Data Found';
	}
	echo $HTML;
	echo $pagination;
	?>