This is an example of how to do page pagination using ajax. It enables us to paginate the page without refreshing the whole page. I found this code somewhere else and I find it useful and easy to integrate into websites. Plus we are able to  modify the css and layout easily.

First of all, we will need to put include the javascript.

<script type=”text/javascript” src=”js/virtualpaginate.js”></script>

You may download the javascript file from http://www.allphpscript.com/dl/virtualpaginate.js

Next, define the maximum number of records per page.  
 $max=10;

Then query the total number of records. For example, mine is to query the total number of customers :

$total_cust=mysql_query(”SELECT c.*, co.* FROM customer c, company co WHERE c.company__id=co.company_id ORDER BY co.company_name ASC”);
$total =mysql_num_rows($total_cust);

$total_pages = floor($total/$max);

 for ($i=0; $i<=$total_pages; $i++) {
 $start = $max * $i;
 $cust2=mysql_query($cmd=”SELECT c.*, co.* FROM customer c, company co WHERE c.company__id=co.company_id ORDER BY co.company_name LIMIT $start, $max “);

Now we create the header of the table :

<div class=”virtualpage”>
<div id=”container”>
<div class=”col_01″><div class=”header”>#</div></div>
<div class=”col_02″><div class=”header”><a href=”list-customers.php?sort=c.customer_name&order=<?=$direction; ?>”>Name</a></div></div>
<div class=”col_03″><div class=”header”><a href=”list-customers.php?sort=co.company_name&order=<?=$direction; ?>”>Company</a></div></div>
<div class=”col_04″><div class=”header”><a href=”list-customers.php?sort=c.customer_email&order=<?=$direction; ?>”>Email</a></div></div>
<div class=”col_05″><div class=”header”><a href=”list-customers.php?sort=c.customer_mobile&order=<?=$direction; ?>”>Mobile</a></div></div>
</div>

Next we pull out each records from the query :

<?php  while($cust3=mysql_fetch_array($cust2)) {   ?>

<div id=”container”>
<div class=”col_01″><div id=”body_content”><?php echo $k; ?></div></div>
<div class=”col_02″><div id=”body_content”><?php echo $cust3["customer_name"]; ?></div></div>
<div class=”col_03″><div id=”body_content”><?php echo $cust3["company_name"]; ?></div></div>
<div class=”col_04″><div id=”body_content”><?php echo $cust3["customer_email"]; ?></div></div>
<div class=”col_05″><div id=”body_content”><?php echo $cust3["customer_mobile"]; ?></div></div>
</div>
<?php }  ?>
</div> <!– close the virtualpage div –>
<?php } ?>

Call the class to create the pagination

<script type=”text/javascript”>
var gallery=new virtualpaginate(”virtualpage”, 1)
gallery.buildpagination(”gallerypaginate”)
</script>

Tada!!! You have your pagination now. Opss it looks extremely horrible. Forgot the CSS

Here you go :

<style type=”text/css”>

.virtualpage, .virtualpage2, .virtualpage3{
/*hide the broken up pieces of contents until script is called. Remove if desired*/
display: none;
}

.paginationstyle{
width: 350px;
text-align: center;
padding: 2px 0;
margin: 10px 0;
}

.paginationstyle select{
border: 1px solid navy;
margin: 0 15px;
}

.paginationstyle a{

padding: 0 5px;
text-decoration: none;
border: 1px solid black;
color: navy;
background-color: white;
}

.paginationstyle a:hover, .paginationstyle a.selected{
color: #000;
background-color: #FEE496;
}

.paginationstyle a.imglinks{
border: 0;
padding: 0;
}

.paginationstyle a.imglinks img{
vertical-align: bottom;
border: 0;
}

.paginationstyle a.imglinks a:hover{
background: none;
}

.paginationstyle .flatview a:hover, .paginationstyle .flatview a.selected{

color: #000;
background-color: yellow;
}
#container {
    display: table;
 width:750px;
    }
 
.col_01 {
 float: left;
 width: 20px;
 height:30px;
}
.col_02 {
 float: left;
 width: 150px;
 margin-left: 7px;
}

.col_03 {
 float: left;
 width: 200px;
}
.col_04 {
 float: left;
 width: 200px;
 margin-left: 7px;
}
.col_05 {
 float: right;
 width: 80px;

}

.header {
 font-weight: bold;
}

</style>

We have a table that generates a list of report, and we would want to click on the header and sort the column. Below is the example script how you can do that.

I have a session that stores the direction whether the column is being sorted ASC or DESC. Upon clicking on the table header, the column sorting will toggle between ASC and DESC. Note that there is a default direction as well, where I put the firstname as the default column to sort.

<?
if(!$_SESSION['direction']) {
  $_SESSION['direction']=’asc’;
} else {
  if($_SESSION['direction']==’asc’) {
  $_SESSION['direction']=’desc’;
  } else { $_SESSION['direction']=’asc’; }
}
$direction=$_SESSION['direction'];
if($_GET['sort']) {
$sort=$_GET['sort'].” “.$direction;
} else {
$sort=’contact_firstname desc’;
}
?>

Here I query the record from the database and the query is ORDER BY $sort where $sort is the value of the which column to sort, and its direction, either ASC or DESC.

$contacts=mysql_query(”SELECT * FROM contact WHERE user__id=’$userid’ ORDER BY $sort”);

You can add in LIMIT for paging behind the $sort.

<table border=”1″ cellpadding=”5″>
  <tr>
  <td width=”17″>#</td>
    <td width=”91″><a href=”search_friend.php?sort=contact_firstname&order=<?= $direction ?>”>Name</a></td>
    <td width=”91″><a href=”search_friend.php?sort=contact_lastname&order=<?= $direction ?>”>Name</a></td>
 <td width=”86″><a href=”search_friend.php?sort=contact_number&order=<?= $direction ?>”>Mobile</a></td>
 <td width=”69″><a href=”search_friend.php?sort=contact_email&order=<?= $direction ?>”>Email</a></td>
  </tr>
  <? $i=1; ?>
  <? while($my_contacts=mysql_fetch_array($contacts)) { ?>
  <tr>
    <td><?= $i ?></td>
    <td><?= $my_contacts['contact_firstname'] ?></td>
    <td><?= $my_contacts['contact_lastname'] ?></td>
    <td><?= $my_contacts['contact_number'] ?></td>
    <td><?= $my_contacts['contact_email'] ?></td>
  </tr>
  <? $i++ ; } ?>
</table>