首页>>分页>>Jquery, Ajax无刷新翻页,支持跳转页面(2013-11-02)

Jquery, Ajax无刷新翻页,支持跳转页面

freejs已经发了不少无刷新翻页的代码了，点击右侧“相关文章”可以找到，这边这个不同在于多了一个跳转页面。

数据库与本站其他翻页的相同，本例和《jquery 无刷新翻页》均是非常实用的案例，而且本例更简单易懂

Jquery, Ajax无刷新翻页,支持跳转页面
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div id="main">  
  2.         <div id="loading"></div>  
  3.         <div id="container">  
  4.             <div class="data"></div>  
  5.             <div class="pagination"></div>  
  6.         </div>  
  7. </div>  

js

 
JavaScript Code
  1. <script type="text/javascript">  
  2.             $(document).ready(function(){  
  3.                 function loading_show(){  
  4.                     $('#loading').html("<img src='images/loading.gif'/>").fadeIn('fast');  
  5.                 }  
  6.                 function loading_hide(){  
  7.                     $('#loading').fadeOut('fast');  
  8.                 }                  
  9.                 function loadData(page){  
  10.                     loading_show();                      
  11.                     $.ajax  
  12.                     ({  
  13.                         type: "POST",  
  14.                         url: "load.php",  
  15.                         data: "page="+page,  
  16.                         success: function(msg)  
  17.                         {  
  18.                             $("#container").ajaxComplete(function(event, request, settings)  
  19.                             {  
  20.                                 loading_hide();  
  21.                                 $("#container").html(msg);  
  22.                             });  
  23.                         }  
  24.                     });  
  25.                 }  
  26.                 loadData(1);  // For first time page load default results  
  27.                 $('#container .pagination li.active').live('click',function(){  
  28.                     var page = $(this).attr('p');  
  29.                     loadData(page);  
  30.                       
  31.                 });             
  32.                 $('#go_btn').live('click',function(){  
  33.                     var page = parseInt($('.goto').val());  
  34.                     var no_of_pages = parseInt($('.total').attr('a'));  
  35.                     if(page != 0 && page <= no_of_pages){  
  36.                         loadData(page);  
  37.                     }else{  
  38.                         alert('Enter a PAGE between 1 and '+no_of_pages);  
  39.                         $('.goto').val("").focus();  
  40.                         return false;  
  41.                     }  
  42.                       
  43.                 });  
  44.             });  
  45.         </script>  
 

load.php

 

PHP Code
  1. <?php  
  2. if($_REQUEST['page'])  
  3. {  
  4. $page = $_REQUEST['page'];  
  5. $cur_page = $page;  
  6. $page -= 1;  
  7. $per_page = 10;  
  8. $previous_btn = true;  
  9. $next_btn = true;  
  10. $first_btn = true;  
  11. $last_btn = true;  
  12. $start = $page * $per_page;  
  13. include_once('conn.php');  
  14.   
  15. $query_pag_data = "SELECT id,name from content LIMIT $start, $per_page";  
  16. $result_pag_data = mysql_query($query_pag_data) or die('MySql Error' . mysql_error());  
  17. $msg = "";  
  18. while ($row = mysql_fetch_array($result_pag_data)) {  
  19. $htmlmsg=htmlspecialchars($row['name']);  
  20.     $msg .= "<li><b>" . $row['id'] . "</b> " . $htmlmsg . "</li>";  
  21. }  
  22. $msg = "<div class='data'><ul>" . $msg . "</ul></div>"; // Content for Data  
  23.   
  24.   
  25. /* --------------------------------------------- */  
  26. $query_pag_num = "SELECT COUNT(*) AS count FROM content";  
  27. $result_pag_num = mysql_query($query_pag_num);  
  28. $row = mysql_fetch_array($result_pag_num);  
  29. $count = $row['count'];  
  30. $no_of_paginations = ceil($count / $per_page);  
  31.   
  32. /* ---------------Calculating the starting and endign values for the loop----------------------------------- */  
  33. if ($cur_page >= 7) {  
  34.     $start_loop = $cur_page - 3;  
  35.     if ($no_of_paginations > $cur_page + 3)  
  36.         $end_loop = $cur_page + 3;  
  37.     else if ($cur_page <= $no_of_paginations && $cur_page > $no_of_paginations - 6) {  
  38.         $start_loop = $no_of_paginations - 6;  
  39.         $end_loop = $no_of_paginations;  
  40.     } else {  
  41.         $end_loop = $no_of_paginations;  
  42.     }  
  43. } else {  
  44.     $start_loop = 1;  
  45.     if ($no_of_paginations > 7)  
  46.         $end_loop = 7;  
  47.     else  
  48.         $end_loop = $no_of_paginations;  
  49. }  
  50. /* ----------------------------------------------------------------------------------------------------------- */  
  51. $msg .= "<div class='pagination'><ul>";  
  52.   
  53. // FOR ENABLING THE FIRST BUTTON  
  54. if ($first_btn && $cur_page > 1) {  
  55.     $msg .= "<li p='1' class='active'>First</li>";  
  56. } else if ($first_btn) {  
  57.     $msg .= "<li p='1' class='inactive'>First</li>";  
  58. }  
  59.   
  60. // FOR ENABLING THE PREVIOUS BUTTON  
  61. if ($previous_btn && $cur_page > 1) {  
  62.     $pre = $cur_page - 1;  
  63.     $msg .= "<li p='$pre' class='active'>Previous</li>";  
  64. } else if ($previous_btn) {  
  65.     $msg .= "<li class='inactive'>Previous</li>";  
  66. }  
  67. for ($i = $start_loop; $i <= $end_loop; $i++) {  
  68.   
  69.     if ($cur_page == $i)  
  70.         $msg .= "<li p='$i' style='color:#fff;background-color:#006699;' class='active'>{$i}</li>";  
  71.     else  
  72.         $msg .= "<li p='$i' class='active'>{$i}</li>";  
  73. }  
  74.   
  75. // TO ENABLE THE NEXT BUTTON  
  76. if ($next_btn && $cur_page < $no_of_paginations) {  
  77.     $nex = $cur_page + 1;  
  78.     $msg .= "<li p='$nex' class='active'>Next</li>";  
  79. } else if ($next_btn) {  
  80.     $msg .= "<li class='inactive'>Next</li>";  
  81. }  
  82.   
  83. // TO ENABLE THE END BUTTON  
  84. if ($last_btn && $cur_page < $no_of_paginations) {  
  85.     $msg .= "<li p='$no_of_paginations' class='active'>Last</li>";  
  86. } else if ($last_btn) {  
  87.     $msg .= "<li p='$no_of_paginations' class='inactive'>Last</li>";  
  88. }  
  89. $goto = "<input type='text' class='goto' size='1' style='margin-top:-1px;margin-left:60px;'/><input type='button' id='go_btn' class='go_button' value='Go'/>";  
  90. $total_string = "<span class='total' a='$no_of_paginations'>Page <b>" . $cur_page . "</b> of <b>$no_of_paginations</b></span>";  
  91. $msg = $msg . "</ul>" . $goto . $total_string . "</div>";  // Content for pagination  
  92. echo $msg;  
  93. }?>  

 翻页样式css

CSS Code
  1. <style type="text/css">  
  2.   
  3.             #loading{  
  4.                 position: absolute;  
  5.                 top: 200px;  
  6.                 left:400px;  
  7.             }  
  8.             #container .pagination ul li.inactive,  
  9.             #container .pagination ul li.inactive:hover{  
  10.                 background-color:#ededed;  
  11.                 color:#bababa;  
  12.                 border:1px solid #bababa;  
  13.                 cursor: default;  
  14.             }  
  15.             #container .data ul li{  
  16.                 list-style: none;  
  17.                 margin: 5px 0 5px 50px;  
  18.                 color: #000;  
  19.                 font-size: 14px;  
  20.             }  
  21.   
  22.             #container .pagination{  
  23.                 width: 600px;  
  24.                 height: 25px;  
  25.             }  
  26.             #container .pagination ul li{  
  27.                 list-style: none;  
  28.                 float: left;  
  29.                 border: 1px solid #006699;  
  30.                 padding: 2px 6px 2px 6px;  
  31.                 margin: 0 3px 0 3px;  
  32.                 font-family: arial;  
  33.                 font-size: 14px;  
  34.                 color: #006699;  
  35.                 font-weight: bold;  
  36.                 background-color: #f2f2f2;  
  37.             }  
  38.             #container .pagination ul li:hover{  
  39.                 color: #fff;  
  40.                 background-color: #006699;  
  41.                 cursor: pointer;  
  42.             }  
  43.             .go_button  
  44.             {  
  45.             background-color:#f2f2f2;border:1px solid #006699;color:#cc0000;padding:2px 6px 2px 6px;cursor:pointer;position:absolute;margin-top:-1px;  
  46.             }  
  47.             .total  
  48.             {  
  49.             float:rightright;font-family:arial;color:#999;  
  50.             }  
  51.   
  52.         </style>  

 


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