首页>>分页>>jquery+php+mysql 无刷新分页翻页(2014-03-01)

jquery+php+mysql 无刷新分页翻页

 freejs发布了很多类似的代码，都各有不同，具体可以到http://freejs.net/fenye.html查看

jquery+php+mysql 无刷新分页翻页
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div align="center">  
  2.   
  3.     <div id="container">  
  4.       
  5.         <div class="search-background">  
  6.             <label><img src="loader.gif" alt="" /></label>  
  7.         </div>  
  8.       
  9.         <div id="content">  
  10.            
  11.         </div>  
  12.           
  13.     </div>  
  14.       
  15.     <div id="paging_button" align="center">  
  16.         <ul>  
  17.         <?php  
  18.         //Show page links  
  19.         for($i=1; $i<=$pages; $i++)  
  20.         {  
  21.             echo '<li id="'.$i.'">'.$i.'</li>';  
  22.         }?>  
  23.         </ul>  
  24.     </div>  
  25. </div>  

 

JavaScript Code
  1. <script type="text/javascript">  
  2. $(document).ready(function(){  
  3.       
  4.     function showLoader(){  
  5.       
  6.         $('.search-background').fadeIn(200);  
  7.     }  
  8.       
  9.     function hideLoader(){  
  10.       
  11.         $('.search-background').fadeOut(200);  
  12.     };  
  13.       
  14.     $("#paging_button li").click(function(){  
  15.           
  16.         showLoader();  
  17.           
  18.         $("#paging_button li").css({'background-color' : ''});  
  19.         $(this).css({'background-color' : '#006699'});  
  20.   
  21.         $("#content").load("data.php?page=" + this.id, hideLoader);  
  22.           
  23.         return false;  
  24.     });  
  25.       
  26.     $("#1").css({'background-color' : '#006699'});  
  27.     showLoader();  
  28.     $("#content").load("data.php?page=1", hideLoader);  
  29.       
  30. });  
  31. </script>  

 data.php

 

PHP Code
  1. <?php  
  2. require "../../conn.php";  
  3.       
  4. $per_page = 3;  
  5. $sqlc = "show columns from content";  
  6. $rsdc = mysql_query($sqlc);  
  7. $cols = mysql_num_rows($rsdc);  
  8. $page = $_REQUEST['page'];  
  9.   
  10. $start = ($page-1)*3;  
  11. $sql = "select * from content order by id limit $start,3";  
  12. $rsd = mysql_query($sql);  
  13. ?>  
  14.   
  15. <?php  
  16. while ($rows = mysql_fetch_assoc($rsd))  
  17. {?>  
  18.     <div class="shopp">  
  19.           
  20.         <div class="label"><?php echo substr($rows['message'],0,150);?></div>  
  21.       
  22.     </div>  
  23. <?php  
  24. }?>  
  25.   
  26. <script type="text/javascript">  
  27. $(document).ready(function(){  
  28.       
  29.     var Timer  = '';  
  30.     var selecter = 0;  
  31.     var Main =0;  
  32.       
  33.     bring(selecter);  
  34.       
  35. });  
  36.   
  37. function bring ( selecter )  
  38. {     
  39.     $('div.shopp:eq(' + selecter + ')').stop().animate({  
  40.         opacity  : '1.0',  
  41.         height: '40px'  
  42.           
  43.     },300,function(){  
  44.           
  45.         if(selecter < 6)  
  46.         {  
  47.             clearTimeout(Timer);   
  48.         }  
  49.     });  
  50.       
  51.     selecter++;  
  52.     var Func = function(){ bring(selecter); };  
  53.     Timer = setTimeout(Func, 20);  
  54. }  
  55.   
  56. </script>  

 


原文地址:http://www.freejs.net/article_fenye_279.html