Paginasi Data menggunakan PHP-MySQL-Ajax

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.