[Web-development (jquery)] AJAX Pagination using jQuery and PHP with Animation

AJAX Pagination using jQuery and PHP with Animation

Download

 //dbcon.php <?php $link = mysql_connect('localhost', 'root', 'ednalan'); mysql_select_db('dbname',$link); ?>

<link type="text/css" media="screen" href="css.css" /> <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ function showLoader(){ $('.search-background').fadeIn(200); } function hideLoader(){ $('.search-background').fadeOut(200); }; $("#paging_button li").click(function(){ showLoader(); $("#paging_button li").css({'background-color' : ''}); $(this).css({'background-color' : '#006699'}); $("#content").load("data.php?page=" + this.id, hideLoader); return false; }); $("#1").css({'background-color' : '#006699'}); showLoader(); $("#content").load("data.php?page=1", hideLoader); }); </script> <?php include("dbcon.php"); $per_page = 5; $sql = "select * from records "; $rsd = mysql_query($sql); $count = mysql_num_rows($rsd); $pages = ceil($count/$per_page);?> <div align="center"> <div> <div> <label><img src="loader.gif" /></label> </div> <div> </div> </div> <div align="center"> <ul> <?php //Show page links for($i=1; $i<=$pages; $i++) { echo '<li>'.$i.'</li>'; }?> </ul> </div> </div>

<?php //data.php include("dbcon.php"); $per_page = 5; $sqlc = "show columns from records"; $rsdc = mysql_query($sqlc); $cols = mysql_num_rows($rsdc); $page = $_REQUEST['page']; $start = ($page-1)*5; $sql = "select * from records order by id limit $start,5"; $rsd = mysql_query($sql); ?> <?php while ($rows = mysql_fetch_assoc($rsd)) {?> <div> <img src="<?php echo $rows['image']?>" width="80" /> <div><?php echo substr($rows['message'],0,150);?></div> </div> <?php }?> <script type="text/javascript"> $(document).ready(function(){ var Timer = ''; var selecter = 0; var Main =0; bring(selecter); }); function bring ( selecter ) { $('div.shopp:eq(' + selecter + ')').stop().animate({ opacity : '1.0', height: '60px' },300,function(){ if(selecter < 6) { clearTimeout(Timer); } }); selecter++; var Func = function(){ bring(selecter); }; Timer = setTimeout(Func, 20); } </script>

CREATE TABLE IF NOT EXISTS `records` ( `id` int(11) NOT NULL AUTO_INCREMENT, `page` varchar(255) NOT NULL, `image` varchar(255) NOT NULL, `message` varchar(255) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=19 ;