Pagination System using Ajax, Jquery, Mysql and PHP

This tutorial is on pagination using Ajax, Jquery, Mysql and PHP. If you Want to add this pagination in you blog/site you can add it easily.

Database:

Create a database and run the below SQL queries.

CREATE TABLE IF NOT EXISTS `articles` (
  `id` int(11) unsigned NOT NULL AUTO_INCREMENT,
  `title` varchar(100) NOT NULL,
  `date` date NOT NULL,
  `description` text NOT NULL,
  `status` tinyint(4) NOT NULL DEFAULT '1',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 AUTO_INCREMENT=9 ;

INSERT INTO `articles` (`id`, `title`, `date`, `description`, `status`) VALUES
(1, 'What is php?', '2013-06-08', 'PHP is a server-side scripting language designed for web development but also used as a general-purpose programming language.', 1),
(2, 'What is ASP?', '2013-06-08', 'An ASP file can contain text, HTML tags and scripts. Scripts in an ASP file are executed on the server. What you should already know', 1),
(3, 'what is javascript', '2013-06-08', 'JavaScript is a popular programming language that''s built into all the major web browsers and used to make web pages interactive', 1),
(4, 'what is ajax?', '2013-06-08', 'Ajax is a group of interrelated web development techniques used on the client-side to create asynchronous web applications', 1),
(8, 'what is Jquery?', '2013-06-09', 'The purpose of jQuery is to make it much easier to use JavaScript on your website. What You Should Already Know', 1);

Javascript:

First of all Jquery library is mandatory. so it must be include in head section of you page along with this Java Script code

$(document).ready(function(){
$('.data').load('load_data.php');
$("a.pages").live('click',function(){
var p=$(this).attr("rel");
$(".data").html('<img border="0" alt="Loading..." src="loader.gif">');
$.ajax({
type: "POST",
url:"load_data.php",
data: { 
'p': p
},
cache: false,
success: function(result){
if(result!=''){
$(".data").html(result);
}else if(result==''){
$(".data").html('');
alert('Some error Occur. Please try again.');
}
}
});
});
});

PHP:

Create a file "load_data.php" and add below code in it.

$max_records=2;
$page = "Select * from   articles where  status=1  order by id asc";
$sql = "Select * from   articles where  status=1 ";
$rstotal=mysql_query($sql) ;
$total_records=mysql_num_rows($rstotal);
$current_page=(isset($_POST["p"]) && intval($_POST["p"])<>0)?intval($_POST["p"])-1:0;
$start=($current_page*$max_records);
if($start=='')
$start=0;
$end=0;
if($total_records >= 1)
{
$total_pages=ceil($total_records/$max_records);
if($start < $total_records)
{
if($start + $max_records < $total_records)
$end = $start + $max_records;
else
$end = $total_records;
}
$page = "$page LIMIT $start,$max_records";
}
$html='';
$pages='';
if($total_records>0){
$page_rs=mysql_query($page);
$page_count=mysql_num_rows($page_rs);
while($page_row=mysql_fetch_assoc($page_rs)){
$html.=' <ul class=""><li>
<h3>'. $page_row['title'].'</h3>
<div class="desc">
'. $page_row['description'].'
</div>
</li></ul>';   
}
if($total_records>0){
$pages.=paginate($current_page,$total_pages);
}
echo $html.'<ul class="pagination">'.$pages.'</ul>';
}else
{
echo $html.='
<div align="center">
'. 'no data to show
</div>';
}

For More Please see the working demo or download the script.

View Demo Download