首页>>分页>>jquery 无刷新翻页(2013-09-12)

jquery 无刷新翻页

 本例与《jquery 翻页分页》的区别在于本例更实用,翻页数字太多的时候会隐藏中间的部分。数据库与《jquery 翻页分页》的数据库相同

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

 js代码

 

JavaScript Code复制内容到剪贴板
  1. <script>  
  2. $(document).ready(function(){  
  3.     $(window).bind("load", function() {  
  4.         page = 1;  
  5.         limit = 2;  
  6.         startpoint = (page * limit) - limit;  
  7.         statement = 'content where id>0';  
  8.         query_string = 'query=' + statement + '&per_page=' + limit + '&page=' + page;  
  9.         $.get('function.php', query_string, function(data){  
  10.             var sHTML = data;  
  11.             $('#pagination_div').html(sHTML);  
  12.         });  
  13.         query_string = 'query=' + statement + '&startpoint=' + startpoint + '&limit=' + limit;  
  14.         $.get('function.php', query_string, function(data){  
  15.             var sHTML = data;  
  16.             $('.records').html(sHTML);  
  17.         });   
  18.     }); //end load  
  19.       
  20.     $(document).on("click", "ul.pagination li a", function(){     
  21.         //alert($(this).attr('title'));   
  22.         if ($(this).attr('title') != 'current')  
  23.         {  
  24.             page = $(this).attr('title');  
  25.             limit = 2;  
  26.             startpoint = (page * limit) - limit;  
  27.             statement = 'content where id>0';  
  28.             query_string = 'query=' + statement + '&per_page=' + limit + '&page=' + page;  
  29.             $.get('function.php', query_string, function(data){  
  30.                 var sHTML = data;  
  31.                 $('#pagination_div').html(sHTML);  
  32.             });  
  33.             query_string = 'query=' + statement + '&startpoint=' + startpoint + '&limit=' + limit;  
  34.             $.get('function.php', query_string, function(data){  
  35.                 var sHTML = data;  
  36.                 $('.records').html(sHTML);  
  37.             });   
  38.         }  
  39.         return false;  
  40.     }); //end event  
  41. }); //end document ready  
  42. </script>  

html代码

XML/HTML Code复制内容到剪贴板
  1. <div class="records round">  
  2.   
  3.     </div>  
  4.     <div id="pagination_div">  
  5.   
  6.     </div>  

 function.php

 

PHP Code复制内容到剪贴板
  1. <?php  
  2.   
  3. function pagination($query, $per_page = 10,$page = 1, $url = '?'){   
  4. include 'conn.php';  
  5. $query = "SELECT COUNT(*) as num FROM {$query}";  
  6. $result = mysql_query($query);  
  7.   
  8. if (!$result)  
  9. {  
  10.         echo 'Error ' . mysqi_error($link);  
  11.         exit();  
  12. }  
  13.   
  14. while ($row = mysql_fetch_array($result))  
  15. {  
  16.     $total = $row['num'];  
  17. }  
  18.   
  19.   
  20. $adjacents = "2";   
  21.   
  22. $page = ($page == 0 ? 1 : $page);    
  23. $start = ($page - 1) * $per_page;                                 
  24.   
  25. $firstPage = 1;  
  26.   
  27.   
  28.   
  29. $prev = $page - 1;                            
  30. $next = $page + 1;  
  31. $lastpage = ceil($total/$per_page);  
  32. $lpm1 = $lastpage - 1;  
  33.   
  34. $pagination = "";  
  35. if($lastpage > 1)  
  36. {     
  37.     $pagination .= "<ul class='pagination'>";  
  38.             $pagination .= "<li class='details'>$page/$lastpage</li>";  
  39.     $prev = ($page == 1)?1:$page - 1;  
  40.     //$pagination = '';  
  41.     if ($page == 1)  
  42.     {  
  43.     $pagination.= "<li><a class='current' title='current'>First</a></li>";  
  44.     $pagination.= "<li><a class='current' title='current'>Prev</a></li>";  
  45.     }  
  46.     else  
  47.     {  
  48.     $pagination.= "<li><a href='{$url}page=$firstPage' title='$firstPage'>First</a></li>";  
  49.     $pagination.= "<li><a href='{$url}page=$prev' title='$prev'>Prev</a></li>";  
  50.     }     
  51.     if ($lastpage < 7 + ($adjacents * 2))  
  52.     {     
  53.         for ($counter = 1; $counter <= $lastpage; $counter++)  
  54.         {  
  55.             if ($counter == $page)  
  56.                 $pagination.= "<li><a class='current' title='current'>$counter</a></li>";  
  57.             else  
  58.                 $pagination.= "<li><a href='{$url}page=$counter' title='$counter'>$counter</a></li>";                     
  59.         }  
  60.     }  
  61.     elseif($lastpage > 5 + ($adjacents * 2))  
  62.     {  
  63.         if($page < 1 + ($adjacents * 2))          
  64.         {  
  65.             for ($counter = 1; $counter < 4 + ($adjacents * 2); $counter++)  
  66.             {  
  67.                 if ($counter == $page)  
  68.                     $pagination.= "<li><a class='current' title='current'>$counter</a></li>";  
  69.                 else  
  70.                     $pagination.= "<li><a href='{$url}page=$counter' title='$counter'>$counter</a></li>";                     
  71.             }  
  72.             $pagination.= "<li class='dot'>...</li>";  
  73.             $pagination.= "<li><a href='{$url}page=$lpm1'  title='$lpm1'>$lpm1</a></li>";  
  74.             $pagination.= "<li><a href='{$url}page=$lastpage' title='$lastpage'>$lastpage</a></li>";          
  75.         }  
  76.         elseif($lastpage - ($adjacents * 2) > $page && $page > ($adjacents * 2))  
  77.         {  
  78.             $pagination.= "<li><a href='{$url}page=1' title='1'>1</a></li>";  
  79.             $pagination.= "<li><a href='{$url}page=2' title='2'>2</a></li>";  
  80.             $pagination.= "<li class='dot'>...</li>";  
  81.             for ($counter = $page - $adjacents; $counter <= $page + $adjacents; $counter++)  
  82.             {  
  83.                 if ($counter == $page)  
  84.                     $pagination.= "<li><a class='current' title='current'>$counter</a></li>";  
  85.                 else  
  86.                     $pagination.= "<li><a href='{$url}page=$counter' title='$counter'>$counter</a></li>";                     
  87.             }  
  88.             $pagination.= "<li class='dot'>..</li>";  
  89.             $pagination.= "<li><a href='{$url}page=$lpm1'  title='$lpm1'>$lpm1</a></li>";  
  90.             $pagination.= "<li><a href='{$url}page=$lastpage' title='$lastpage'>$lastpage</a></li>";          
  91.         }  
  92.         else  
  93.         {  
  94.             $pagination.= "<li><a href='{$url}page=1' title='1'>1</a></li>";  
  95.             $pagination.= "<li><a href='{$url}page=2' title='2'>2</a></li>";  
  96.             $pagination.= "<li class='dot'>..</li>";  
  97.             for ($counter = $lastpage - (2 + ($adjacents * 2)); $counter <= $lastpage; $counter++)  
  98.             {  
  99.                 if ($counter == $page)  
  100.                     $pagination.= "<li><a class='current' title='current'>$counter</a></li>";  
  101.                 else  
  102.                     $pagination.= "<li><a href='{$url}page=$counter' title='$counter'>$counter</a></li>";                     
  103.             }  
  104.         }  
  105.     }  
  106.       
  107.     if ($page < $counter - 1){   
  108.         $pagination.= "<li><a href='{$url}page=$next' title='$next'>Next</a></li>";  
  109.         $pagination.= "<li><a href='{$url}page=$lastpage' title='$lastpage'>Last</a></li>";  
  110.     }else{  
  111.         $pagination.= "<li><a class='current' title='current'>Next</a></li>";  
  112.         $pagination.= "<li><a class='current' title='current'>Last</a></li>";  
  113.     }  
  114.     $pagination.= "</ul>n";          
  115. }  
  116.   
  117. return $pagination;  
  118. }   
  119. //code to create pagination links     
  120. if (isset($_GET['query']) and isset($_GET['per_page'])){  
  121.   
  122. $query = $_GET['query'];  
  123. $per_page = $_GET['per_page'];  
  124. $page = $_GET['page'];  
  125.   
  126. echo pagination($query, $per_page, $page);  
  127. }  
  128.   
  129. //code for retrieving the records  
  130. if(isset($_GET['startpoint']))  
  131. {  
  132. include '../../conn.php';  
  133. $records = '';  
  134. $statement = mysql_real_escape_string($_GET['query']);  
  135. $startpoint = mysql_real_escape_string($_GET['startpoint']);  
  136. $limit = mysql_real_escape_string($_GET['limit']);  
  137. //show records  
  138. $query = "SELECT * FROM {$statement} LIMIT {$startpoint} , {$limit}";  
  139. $result = mysql_query($query);  
  140.   
  141. if (!$result)  
  142. {  
  143.     echo 'Error ' . mysql_error($link);  
  144. }  
  145.   
  146. while ($row = mysql_fetch_array($result)) {  
  147.     $records = $records . "<div class='record round'>{$row['id']}#{$row['name']}</div>";  
  148. }  
  149. echo $records;  
  150. }  
  151. ?>  

 


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