- This code will load the paginated data via AJAX (We'll have some loader image to make it look good and user friendly).
- Paginated data was returned by our PHP script with the help of a ModifiedPS_Pagination Class (Yes, I modified it myself since I want to use this Awesome pagination class with jQuery.)
 |
| Easy browsing of pages |
We're gonna have the following files for this script:
images/ajax-loader.gif - for our loader animation
js/jquery-1.4.js - our favorite javascript library
libs/ps_pagination.php - the pagination class I modified
styles/style.css - style for our table data and page number navigation
config_open_db.php - for database connection
index.php - our main UI
search_results.php - returns the data that will be returned to index.php
js/jquery-1.4.js - our favorite javascript library
libs/ps_pagination.php - the pagination class I modified
styles/style.css - style for our table data and page number navigation
config_open_db.php - for database connection
index.php - our main UI
search_results.php - returns the data that will be returned to index.php
Step 1:Prepare you data. We're gonna use the following table structure. Just add you own data.
CREATE TABLE IF NOT EXISTS `users` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`firstname` varchar(32) NOT NULL,
`lastname` varchar(32) NOT NULL,
`email` varchar(32) NOT NULL,
`username` varchar(32) NOT NULL,
`password` varchar(32) NOT NULL,
PRIMARY KEY (`id`)
)
`id` int(11) NOT NULL AUTO_INCREMENT,
`firstname` varchar(32) NOT NULL,
`lastname` varchar(32) NOT NULL,
`email` varchar(32) NOT NULL,
`username` varchar(32) NOT NULL,
`password` varchar(32) NOT NULL,
PRIMARY KEY (`id`)
)
Step 2: Prepare your loader image, jQuery library and our modified PS Pagination library. I will not copy the pagination library codes here. You may just download the code package of this tutorial and you may compare it to its original code by downloading it here.
Step 3: Our User Interface will be represented by our index.php file:
<html>
<head>
<title>Paginating Your Data with AJAX and Awesome PHP Pagination Class</title>
</head>
<body>
<div id='retrieved-data'>
<!--
this is where data will be shown
-->
<img src="images/ajax-loader.gif" />
</div>
<script type = "text/javascript" src = "js/jquery-1.4.js"></script>
<script type = "text/javascript">
$(function() {
//call the function onload, default to page 1
getdata( 1 );
});
function getdata( pageno ){
var targetURL = 'search_results.php?page=' + pageno; //page no was used internally by the pagination class, its value was supplied by our navigation buttons
$('#retrieved-data').html('<p><img src="images/ajax-loader.gif" /></p>');
$('#retrieved-data').load( targetURL ).hide().fadeIn('slow');
}
</script>
</body>
</html>
<head>
<title>Paginating Your Data with AJAX and Awesome PHP Pagination Class</title>
</head>
<body>
<div id='retrieved-data'>
<!--
this is where data will be shown
-->
<img src="images/ajax-loader.gif" />
</div>
<script type = "text/javascript" src = "js/jquery-1.4.js"></script>
<script type = "text/javascript">
$(function() {
//call the function onload, default to page 1
getdata( 1 );
});
function getdata( pageno ){
var targetURL = 'search_results.php?page=' + pageno; //page no was used internally by the pagination class, its value was supplied by our navigation buttons
$('#retrieved-data').html('<p><img src="images/ajax-loader.gif" /></p>');
$('#retrieved-data').load( targetURL ).hide().fadeIn('slow');
}
</script>
</body>
</html>
Step 4: This will be the code inside our search_results.php file where our modified pagination class was used.
<!-- include style -->
<link rel="stylesheet" type="text/css" href="styles/style.css" />
<?php
//open database
include 'config_open_db.php';
//include our awesome pagination
//class (library)
include 'libs/ps_pagination.php';
//query all data anyway you want
$sql = "select * from users ORDER BY firstname DESC";
//execute query and get and
$rs = mysql_query( $sql ) or die('Database Error: ' . mysql_error() . ' ' . $sql );
//now, where gonna use our pagination class
//this is a significant part of our pagination
//i will explain the PS_Pagination parameters
//$conn is a variable from our config_open_db.php
//$sql is our sql statement above
//3 is the number of records retrieved per page
//4 is the number of page numbers rendered below
//null - i used null since in dont have any other
//parameters to pass (i.e. param1=valu1¶m2=value2)
//you can use this if you're gonna use this class for search
//results since you will have to pass search keywords
$pager = new PS_Pagination( $conn, $sql, 3, 4, null );
//our pagination class will render new
//recordset (search results now are limited
//for pagination)
$rs = $pager->paginate();
//get retrieved rows to check if
//there are retrieved data
$num = mysql_num_rows( $rs );
if($num >= 1 ){
//creating our table header
echo "<table id='my-tbl'>";
echo "<tr>";
echo "<th>Firstname</th>";
echo "<th>Lastname</th>";
echo "<th>Email</th>";
echo "</tr>";
//looping through the records retrieved
while($row = mysql_fetch_array( $rs )){
echo "<tr class='data-tr' align='center'>";
echo "<td>{$row['firstname']}</td>";
echo "<td>{$row['lastname']}</td>";
echo "<td>{$row['email']}</td>";
echo "</tr>";
}
echo "</table>";
}else{
//if no records found
echo "No records found!";
}
//page-nav class to control
//the appearance of our page
//number navigation
echo "<div class='page-nav'>";
//display our page number navigation
echo $pager->renderFullNav();
echo "</div>";
?>
<link rel="stylesheet" type="text/css" href="styles/style.css" />
<?php
//open database
include 'config_open_db.php';
//include our awesome pagination
//class (library)
include 'libs/ps_pagination.php';
//query all data anyway you want
$sql = "select * from users ORDER BY firstname DESC";
//execute query and get and
$rs = mysql_query( $sql ) or die('Database Error: ' . mysql_error() . ' ' . $sql );
//now, where gonna use our pagination class
//this is a significant part of our pagination
//i will explain the PS_Pagination parameters
//$conn is a variable from our config_open_db.php
//$sql is our sql statement above
//3 is the number of records retrieved per page
//4 is the number of page numbers rendered below
//null - i used null since in dont have any other
//parameters to pass (i.e. param1=valu1¶m2=value2)
//you can use this if you're gonna use this class for search
//results since you will have to pass search keywords
$pager = new PS_Pagination( $conn, $sql, 3, 4, null );
//our pagination class will render new
//recordset (search results now are limited
//for pagination)
$rs = $pager->paginate();
//get retrieved rows to check if
//there are retrieved data
$num = mysql_num_rows( $rs );
if($num >= 1 ){
//creating our table header
echo "<table id='my-tbl'>";
echo "<tr>";
echo "<th>Firstname</th>";
echo "<th>Lastname</th>";
echo "<th>Email</th>";
echo "</tr>";
//looping through the records retrieved
while($row = mysql_fetch_array( $rs )){
echo "<tr class='data-tr' align='center'>";
echo "<td>{$row['firstname']}</td>";
echo "<td>{$row['lastname']}</td>";
echo "<td>{$row['email']}</td>";
echo "</tr>";
}
echo "</table>";
}else{
//if no records found
echo "No records found!";
}
//page-nav class to control
//the appearance of our page
//number navigation
echo "<div class='page-nav'>";
//display our page number navigation
echo $pager->renderFullNav();
echo "</div>";
?>
Step 5: As for the CSS, I used the following:
<style type='text/css'>
/*you can change you table style here*/
#my-tbl {
background-color: #FFF;
color: black;
padding: 5px;
width: 700px;
border: thin solid red;
}
#th{
background-color: #000;
color: #FFF;
padding: 10px;
border-bottom: thin solid #000;
}
.data-tr{
background-color: #FFF;
color: #000;
border-bottom: thin solid #000;
}
.data-tr:hover {
background-color: #FAEFCF;
color: black;
padding: 5px;
border-bottom: thin solid #000;
}
.data-tr td{
padding: 10px;
margin: 0px;
}
/* you can change page navigation here*/
.page-nav{
margin: 10px 0 0 0;
padding: 8px;
}
.page-nav a{
border: none;
padding: 8px;
text-decoration: none;
background-color: #FFC;
border: thin solid #FC0;
color: #000;
}
.page-nav a:hover{
border: thin solid #FC0;
background-color: #FC0;
color: #fff;
}
/*this is the style for selected page number*/
.page_link{
padding: 8px;
}
</style>
/*you can change you table style here*/
#my-tbl {
background-color: #FFF;
color: black;
padding: 5px;
width: 700px;
border: thin solid red;
}
#th{
background-color: #000;
color: #FFF;
padding: 10px;
border-bottom: thin solid #000;
}
.data-tr{
background-color: #FFF;
color: #000;
border-bottom: thin solid #000;
}
.data-tr:hover {
background-color: #FAEFCF;
color: black;
padding: 5px;
border-bottom: thin solid #000;
}
.data-tr td{
padding: 10px;
margin: 0px;
}
/* you can change page navigation here*/
.page-nav{
margin: 10px 0 0 0;
padding: 8px;
}
.page-nav a{
border: none;
padding: 8px;
text-decoration: none;
background-color: #FFC;
border: thin solid #FC0;
color: #000;
}
.page-nav a:hover{
border: thin solid #FC0;
background-color: #FC0;
color: #fff;
}
/*this is the style for selected page number*/
.page_link{
padding: 8px;
}
</style>
Well that's it. :)
0 comments:
Post a Comment