PAGINATION TUTORIAL USING JQUERY AND PHP

first create table and call it pagination with 3 fields  id,

name and age and enter 

dummy data 

mysql.php 

<?php 
@mysql_connect("localhost","root","") or die ("could not connect to mysql");
@mysql_select_db("name of your database") or die ("no database");
?>
///////////page end here

index.php

<?php
include_once "mysql.php";//include the mysql connect script

$pagen=0;

$sql_rec = mysql_query("SELECT * FROM pagination ORDER BY id DESC LIMIT $pagen,4");//<---- this statement mean that you chose the first 4 results
while($row = mysql_fetch_array($sql_rec)){//<---- this statement fetch first 4 results
 $id = $row["id"];
 $name = $row["name"];
 $age = $row["age"];
 
$namelist .= 'name : '.$name.' age : '.$age.'<br />' ;
}

$sql_list = mysql_query("SELECT * FROM pagination");
$num_rows = mysql_num_rows($sql_list);//<---- this statement to determine number of row we will paginate
$pnumber = ceil($num_rows/4);//<---- we will divide the number of rows by 4 which is the number of post we will render  
?>

<style type="text/css">
<!--
body {
}
.link {
 background-color: #FFFFFF;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
 font-weight: bold;
 color: #003399;
 text-decoration: none;
 padding-right: 2px;
 padding-left: 2px;
}

-->
</style>
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//$('#loading').hide();//<----this will hide loading gif 
$('.link').first().css('background', 'grey');//<----this will highlight the number 1
});

function pages(page){//<----this function will run we clicked on the show more link      ( page = '.$e.')

//$('#loading').show();//<----this loading gif will appear
  $('.link').css('background', 'white');  //<----this will remove the highlight
  $("#pages" + page).css('background', 'grey');//<----this will highlight number that was clicked
  var URL = "userslist.php";
  $.post(URL,{pages:"paginate",pageNumber:page},function(data){//<----will run the userslist.php
  $("#OldComment").html(data).show();//<----replace the old page with the new one
  $('#loading').hide();
  });
 }
</script>

<table width="500" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td><div id='OldComment'><?php print"$namelist"; ?></div>
      <div class="pagination">
        <?php
    for($i=0; $i<=($pnumber-1); $i++)//<----we run a for loop that start from 0 to $pnumber 
  {
   $e= $i*4 ;//<----this will replace $pagen in the userlist.php
   $d=$i+1; //<----this will the number the pages
   echo '<a class="link" id="pages'.$e.'" href="#" onclick="return false" onmousedown="javascript:pages('.$e.');">'.$d.'</a> ';//<----when you click on this link the javascript:pages('.$e.'); will run 
  }
?>
     //   <img src="loading.gif" alt="" width="15" height="15" id="loading" /></div></td>//<----this loading gif will appear every time 
  </tr>
</table>

/////////////////////////////page end here
userslist.php
<?php
$pagen = $_POST['pageNumber'];//<----resulted from the jquery we ran in last script 
include_once "mysql.php";
 if ($_POST['pages'] == "paginate"){
$sql_selfnews = mysql_query("SELECT * FROM pagination ORDER BY id DESC LIMIT $pagen,4");//<---- this statement will select next 4 results
while($row = mysql_fetch_array($sql_selfnews)){
 $id = $row["id"];
 $name = $row["name"];
 $age = $row["age"];
 
$namelist .= 'name : '.$name.' age : '.$age.'<br />' ;
}
}
?>
<?php print"$namelist"; ?>//<---- this statement will render next 4 results