Untuk menampilkan data dari table yang memiliki banyak records sangat dibutuhkan sistem Paginasi, untuk memudahkan navigasi. Ada beberapa teknik membuat paginasi, berikut salah satu teknik paginasi menggunakan Ajax-PHP-MySQL.
Langkah pertama adalah membuat contoh database yang memiliki struktur tabel sebagai berikut :
CREATE TABLE `records` (
`id` int(11) NOT NULL auto_increment,
`img` varchar(255) NOT NULL,
`message` varchar(200) NOT NULL,
PRIMARY KEY (`id`)
)
Isi tabel tersebut dengan beberapa contoh data dengan struktur data yang ada, Kemudian buat program PHP yang berfungsi untuk menghubungkan PHP dengan database, simpan file ini dalam bentuk PHP :
<?php
/* Database config */
$db_host = 'localhost';
$db_user = 'user database';
$db_pass = 'password database';
$db_database = 'nama database';
/* End config */
$link = @mysql_connect($db_host,$db_user,$db_pass) or die('Unable to establish a DB connection');
mysql_query("SET NAMES 'utf8'");
mysql_select_db($db_database,$link);
?>
Berikutnya membuat program PHP yang bertujuan untuk mengambil dan menampilkan isi dari tabe, simpan dalam bentuk PHP :
<?php
include("connect.php");
$per_page = 4;
$sqlc = "show columns from records ";
$rsdc = mysql_query($sqlc);
$cols = mysql_num_rows($rsdc);
$page = $_REQUEST['page'];
$start = ($page-1)*4;
$sql = "select * from records order by id limit $start,4";
$rsd = mysql_query($sql);
?>
<?php
while ($rows = mysql_fetch_assoc($rsd))
{?>
<div class="each_rec"> <img src="<?php echo $rows['img'];?>" height="50" width="70" style="float:left; margin-right:3px;" alt="" /> <?php echo $rows['message'];?></div>
<?php
}?>
Program javascript berikut untuk menampilkan data yang telah diambil menggunakan Program PHP di atas :
$(document).ready(function(){
//show loading bar
function showLoader(){
$('.search-background').fadeIn(200);
}
//hide loading bar
function hideLoader(){
$('.search-background').fadeOut(200);
};
$("#paging_button li").click(function(){
//show the loading bar
showLoader();
$("#paging_button li").css({'background-color' : ''});
$(this).css({'background-color' : '#A5CDFA'});
$("#content").load("data.php?page=" + this.id, hideLoader);
});
// by default first time this will execute
$("#1").css({'background-color' : '#A5CDFA'});
showLoader();
$("#content").load("data.php?page=1", hideLoader);
});
Berikut style CSS untuk mengatur tampilan paginasi :
/* CSS Document www.99points.info */
#heading
{
font-family:Georgia, "Times New Roman", Times, serif;
font-size:56px;
color:#CC0000;
}
body{
text-align:center;
font-family:Arial, Sans-Serif;
font-size:0.75em;
}
/* CSS Document */
#container {
height:300px;
padding:12px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
text-align: center;
text-decoration: none;
width: 600px;
margin-top:40px;
}
#container .each_rec{
color:#000066;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
padding:5px 5px 12px 5px;
border-bottom:solid #669900;
text-align:justify;
margin-bottom:11px;
}
.search-background {
display: none;
font-size: 13px;
font-weight: bold;
height:160px;
position: absolute;
padding-top:140px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
text-align: center;
opacity:0.5;filter: alpha(opacity=50) ;
text-decoration: none;
width: 600px;
}
.search-background {
background-color: #ff4242;
color:#FFFFFF;
text-shadow: #fff 0px 0px 20px;
}
search-background label{
border:solid #66FF00 1px;
}
#paging_button ul{ width: 600px; padding:0px; margin:8px;}
#paging_button ul li { -moz-border-radius: 6px;
-webkit-border-radius: 6px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
float:left; height:20px; width:20px; list-style-image:none;
list-style-type:none; font-weight:bold; border:solid #CCCCCC 1px;
margin:3px; cursor:pointer}
li:hover{ color: #CC0000; cursor: pointer; }
Akhirnya semua program tersebut dijadikan satu dalam sebuah halam :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Paginasi Halaman dengan Ajax</title>
<link rel="stylesheet" type="text/css" media="screen" href="css.css" />
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="js.js"></script>
</head>
<body>
<?php
$per_page = 4;
include("connect.php");
$sql = "select * from records ";
$rsd = mysql_query($sql);
$count = mysql_num_rows($rsd);
$pages = ceil($count/$per_page)
?>
<div align="center">
<h1>Paginasi Halaman dengan Ajax</h1>
<div id="container">
<div class="search-background">
<label><img src="loader.gif" alt="" /></label>
</div>
<div id="content"></div>
</div>
<div id="paging_button">
<ul>
<?php
//Show page links
for($i=1; $i<=$pages; $i++)
{
echo '<li id="'.$i.'">'.$i.'</li>';
}?>
</ul>
</div>
</div>
<br clear="all" /><br clear="all" /><br clear="all" /><br clear="all" /><br clear="all" /><br clear="all" />
</body>
</html>
Untuk meliha contoh dari program ditas bisa dilihat
disini, dan untuk download contoh programnya
disini.
