PHP Ajax Pagination Tutorial

PHP Ajax Pagination Tutorial

This post explains you about how to implement PHP Ajax Pagination.

It is better to have Ajax Pagination on Your Webpage as Ajax Pagination will load only the specific part rather than whole page, but at the same time it will affect your SEO.

 

Download Link   Demo Link

 

Sample database design for table name contact.

This table contains id (primary key), name and age.

CREATE TABLE IF NOT EXISTS `pagination` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `post` varchar(250) NOT NULL,
  `postlink` varchar(250) NOT NULL,
  PRIMARY KEY (`id`)
)

dbConnect.inc.php

Contains database connectivity code

$mysql_db_hostname = "Host name";
$mysql_db_user = "UserName";
$mysql_db_password = "Password";
$mysql_db_database = "Database Name";

$con = mysql_connect($mysql_db_hostname, $mysql_db_user,
       $mysql_db_password or die("Could not connect database");
//Create a new connection
mysql_select_db($mysql_db_database, $con) or
                 die("Could not select database");
// select database

style.css  
Contain css code.

#wrapper ul{
list-style:none;
margin-left:30%;
}
#wrapper ul li a{
text-decoration:none;
border:1px solid #474747;
padding:2px 8px 2px 8px;
color:#474747;
}
#wrapper ul li{
float:left;
margin-left:10px;
}

pagination.inc
Contain pagination logic function and a constant PAGE_PER_NO that will define per page data count.

define('PAGE_PER_NO',8);
function getPagination($count){
      $paginationCount= floor($count / PAGE_PER_NO);

      $paginationModCount= $count % PAGE_PER_NO;
      if(!empty($paginationModCount)){
               $paginationCount++;
      }

      return $paginationCount;
}

index.php
Contain pagination display code and ajax logic

include_once('inc/dbConnect.inc.php');
include_once('inc/pagination.inc.php');
$query="select id from pagination order by id desc";
$res=mysql_query($query);
$count=mysql_num_rows($res);
if($count > 0){
      $paginationCount=getPagination($count);
}

Ajax Code

<script type="text/javascript">
function changePagination(pageId,liId){
     $(".flash").show();
     $(".flash").fadeIn(400).html
                ('Loading <img src="image/ajax-loading.gif" />');
     var dataString = 'pageId='+ pageId;
     $.ajax({
           type: "POST",
           url: "pageData.php",
           data: dataString,
           cache: false,
           success: function(result){
                 $(".flash").hide();
                 $(".link a").css('background-color','#fff') ;
                 $("#"+liId+" a").css('background-color','#99A607');
                 $("#pageData").html(result);
           }
      });
}
</script>

<body onload="changePagination('0','first')">
For load data first time

<div id="pageData"></div>
<?php
if($count > 0){
?>
<ul>
    <li class='first link' id="first">
        <a href="javascript:void(0)"
             onclick="changePagination('0','first')">First</a>
    </li>
    <?php
    for($i=0;$i<$paginationCount;$i++){
    ?>
    <li id="<?php echo $i;?>_no" class='link'>
          <a href="javascript:void(0)"
            onclick="changePagination
               ('<?php echo $i;?>','<?php echo $i;?>_no')">
              <?php echo $i+1;?>
          </a>
    </li>
    <?php
    }
    ?>
    <li class='last link' id="last">
         <a href="javascript:void(0)"
           onclick="changePagination
              ('<?php echo $paginationCount-1;?>','last')">
             Last
         </a>
    </li>
    <li class="flash"></li>
</ul>
<?php } ?>

pageData.php
Contain display data.

include_once('inc/dbConnect.inc.php');
include_once('inc/pagination.inc.php');

if(isset($_POST['pageId']) && !empty($_POST['pageId'])){
   $id=$_POST['pageId'];
}else{
   $id='0';
}

$pageLimit=PAGE_PER_NO*$id;
$query="select post,link from pagination order by id desc
limit $pageLimit,".PAGE_PER_NO;
$res=mysql_query($query);
$count=mysql_num_rows($res);
$HTML='';
if($count > 0){
while($row=mysql_fetch_array($res)){
   $post=$row['post'];
   $link=$row['link'];
   $HTML.='<div>';
   $HTML.='<a href="'.$link.'" target="blank">'.$post.'</a>';
   $HTML.='</div><br/>';
}
}else{
    $HTML='No Data Found';
}
echo $HTML;
Both comments and pings are currently closed.

Comments are closed.