首页>>分页>>jquery 翻页分页(2013-09-05)

jquery 翻页分页

$item_per_page=2;设置每页显示个数

数据库表

CREATE TABLE `content` (

  `id` int(11) NOT NULL auto_increment,

  `name` varchar(200) collate utf8_unicode_ci NOT NULL,

  `classid` int(11) NOT NULL,

  `message` varchar(3000) collate utf8_unicode_ci NOT NULL,

  `updatetime` datetime NOT NULL,

  PRIMARY KEY  (`id`)

) ENGINE=MyISAM  DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=11 ;

jquery 翻页分页

index.php

XML/HTML Code复制内容到剪贴板
  1. <?php  
  2. include("conn.php");  
  3. $item_per_page = 2;  
  4.   
  5. $results = mysql_query("SELECT COUNT(*) FROM content");  
  6. $get_total_rows = mysql_fetch_array($results); //total records  
  7. //echo $get_total_rows[0];  
  8. //  
  9. $pages = ceil($get_total_rows[0]/$item_per_page)+1;   
  10.   
  11. //  
  12. if($pages > 1)  
  13. {  
  14.     $pagination = '';  
  15.     $pagination .'<ul class="paginate">';  
  16.     for($i = 1; $i<$pages; $i++)  
  17.     {  
  18.         $pagination .'<li><a href="#" class="paginate_click" id="'.$i.'-page">'.$i.'</a></li>';  
  19.     }  
  20.     $pagination .'</ul>';  
  21. }  
  22.   
  23. ?>  
  24. <script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>  
  25. <script type="text/javascript">  
  26. $(document).ready(function() {  
  27.     $("#results").load("fetch_pages.php", {'page':0}, function() {$("#1-page").addClass('active');});  //  
  28.       
  29.     $(".paginate_click").click(function (e) {  
  30.           
  31.         $("#results").prepend('<div class="loading-indication"><img src="ajax-loader.gif" /> Loading...</div>');  
  32.           
  33.         var clicked_id = $(this).attr("id").split("-"); //  
  34.         var page_num = parseInt(clicked_id[0]); //  
  35.           
  36.         $('.paginate_click').removeClass('active'); //  
  37.   
  38.         $("#results").load("fetch_pages.php", {'page':(page_num-1)}, function(){  
  39.   
  40.         });  
  41.   
  42.         $(this).addClass('active'); //  
  43.           
  44.         return false; //  
  45.     });   
  46. });  
  47. </script>  
  48. <link href="css/style.css" rel="stylesheet" type="text/css">  
  49. </head>  
  50. <body>  
  51.   
  52. <div id="results"></div>  
  53. <?php echo $pagination; ?>  

 fetch_pages.php

 

XML/HTML Code复制内容到剪贴板
  1. <?php  
  2. include("conn.php");  
  3. $item_per_page = 2;  
  4.   
  5.   
  6. //sanitize post value  
  7. $page_number = filter_var($_POST["page"], FILTER_SANITIZE_NUMBER_INT, FILTER_FLAG_STRIP_HIGH);  
  8.   
  9. //validate page number is really numaric  
  10. if(!is_numeric($page_number)){die('Invalid page number!');}  
  11.   
  12. //get current starting point of records  
  13. $position = ($page_number * $item_per_page);  
  14.   
  15. //Limit our results within a specified range.   
  16. $results = mysql_query("SELECT id,name,message FROM content ORDER BY id ASC LIMIT $position, $item_per_page");  
  17.   
  18. //output results from database  
  19. echo '<ul class="page_result">';  
  20. while($row = mysql_fetch_array($results))  
  21. {  
  22.     echo '<li id="item_'.$row["id"].'">'.$row["id"].'. <span class="page_name">'.$row["name"].'</span><Br><span class="page_message">'.$row["message"].'</span></li>';  
  23. }  
  24. echo '</ul>';  
  25. ?>  

 


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