首页>>分页>>jquery ajax无刷新翻页 分页(2013-11-07)

jquery ajax无刷新翻页 分页

 freejs.net已经发了不少无刷新翻页的代码，都比较实用，这边这个非常简单，适合学习或者评论使用

搜索本站可以找到更多分页代码

注意本例jq版本为1.4.3

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

 

XML/HTML Code
  1. <script>  
  2. $(function(){  
  3. $("#content").load("view-comments.php");  
  4.   
  5. //PAGE NUMBER onClick FUNCTION  
  6. $(".page").live("click", function(){  
  7. var page = $(this).attr("id");  
  8. $("#content").load("view-comments.php?page="+page);  
  9. });  
  10. });  
  11. </script>  
  12. <style>  
  13. .page:hover {  
  14. cursor: pointer;  
  15. text-decoration: underline;  
  16. }  
  17. .pagenum {  
  18. color: #32baed;  
  19. }  
  20. .content {  
  21. width: 600px;  
  22. }  
  23. .content td {  
  24. width: 50%;  
  25. }  
  26. </style>  
  27. <div id="content" style="padding-left:100px;"></div>

view-comments.php

 

PHP Code
  1. <?php  
  2.   
  3. //FILE WITH THE IMPORTANT MySQL INFO  
  4. include 'conn.php';  
  5.   
  6. //PAGE NUMBER, RESULTS PER PAGE, AND OFFSET OF THE RESULTS  
  7. if($_GET["page"]){  
  8.     $pagenum = $_GET["page"];  
  9. } else {  
  10.     $pagenum = 1;  
  11. }  
  12.   
  13. $rowsperpage = 3; //MAXIMUM RESULTS PER PAGE  
  14. $offset = ($pagenum - 1) * $rowsperpage; //WHERE THE RESULTS START FROM  
  15.   
  16. $table="content";  
  17. //FOR RESULTS OF THE PAGE  
  18. $q = mysql_query("SELECT * FROM $table ORDER BY id LIMIT $offset, $rowsperpage");  
  19. $page_nums = mysql_num_rows($q); //NUMBER OF RESULTS FOR THE PAGE  
  20.   
  21. $total_q = mysql_query("SELECT * FROM $table"); //FOR THE ALL RESULTS  
  22. $total_nums = mysql_num_rows($total_q); //TOTAL NUMBER OF RESULTS  
  23. $total_pages = ceil($total_nums/$rowsperpage); //NUMBER OF PAGES  
  24.   
  25. //IF PAGE NUMBER IS WITHIN THE FIRST AND LAST PAGES  
  26. if($pagenum>=1&&$pagenum<=$total_pages)  
  27. {  
  28.     while($r=mysql_fetch_array($q))  
  29.     {  
  30.         $content = $r["name"];  
  31.         echo '<table class="content"><tr><td>'.$content.'</td></tr></table>';  
  32.     }  
  33.       
  34.     echo '<br>';  
  35.       
  36.     //IF ANY RESULTS  
  37.     if($total_nums)  
  38.     {  
  39.         $range = 2; //NUMBER OF PAGES TO BE SHOWN BEFORE AND AFTER THE CURRENT PAGE NUMBER  
  40.           
  41.         //FIRST, PREVIOUS, NEXT, AND LAST LINKS  
  42.         if($pagenum>1)  
  43.         {  
  44.             $page = $pagenum - 1;  
  45.             $first = '<a class="page" id="1">First</a> ';  
  46.             $prev = '<a class="page" id="'.$page.'">Prev</a> ';  
  47.         }  
  48.         if($pagenum<$total_pages)  
  49.         {  
  50.             $page = $pagenum + 1;  
  51.             $next = '<a class="page" id="'.$page.'">Next</a> ';  
  52.             $last = '<a class="page" id="'.$total_pages.'">Last</a> ';  
  53.         }  
  54.           
  55.         //PAGINATION  
  56.         for($page=($pagenum-$range); $page<=($pagenum+$range); $page++)  
  57.         {  
  58.             if($page>=1&&$page<=$total_pages)  
  59.             {  
  60.                 if($page==$pagenum)  
  61.                 {  
  62.                     $nav .= '<span class="pagenum">'.$page.'</span> ';  
  63.                 }  
  64.                 else  
  65.                 {  
  66.                     $nav .= '<a class="page" id="'.$page.'">'.$page.'</a> ';  
  67.                 }  
  68.             }  
  69.         }  
  70.     }  
  71.       
  72.     //DISPAYS IN HTML  
  73.     echo $first . $prev . $nav . $next . $last;  
  74.       
  75. } else {  
  76.     //OTHERWISE...  
  77.     header("Location: view-comments.php"); //WILL REDIRECT TO THE FIRST PAGE OF RESULTS  
  78. }  
  79.   
  80. ?>  

 


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