jQuery+Ajax+PHP+Mysql實現分頁顯示數據

jQuery+Ajax+PHP+Mysql實現分頁顯示數據

就2個文件,一個顯示分頁的文件和一個獲取分頁的文件

本例數據庫與之前《jquery 翻頁分頁》是相同的

 

主要代碼:

 index.html

XML/HTML Code
  1. <script type="text/javascript">  
  2. var curPage = 1; //當前頁碼  
  3. var total,pageSize,totalPage;  
  4. //獲取數據  
  5. function getData(page){   
  6. $.ajax({  
  7. type: 'POST',  
  8. url: 'pages.php',  
  9. data: {'pageNum':page-1},  
  10. dataType:'json',  
  11. beforeSend:function(){  
  12. $("#list ul").append("<li id='loading'>loading...</li>");  
  13. },  
  14. success:function(json){  
  15. $("#list ul").empty();  
  16. total = json.total; //總記錄數  
  17. pageSize = json.pageSize; //每頁顯示條數  
  18. curPage = page; //當前頁  
  19. totalPage = json.totalPage; //總頁數  
  20. var li = "";  
  21. var list = json.list;  
  22. $.each(list,function(index,array){ //遍歷json數據列  
  23. li += "<li><a href='#'>"+array['title']+"</a></li>";  
  24. });  
  25. $("#list ul").append(li);  
  26. },  
  27. complete:function(){ //生成分頁條  
  28. getPageBar();  
  29. },  
  30. error:function(){  
  31. alert("數據加載失敗");  
  32. }  
  33. });  
  34. }  
  35.   
  36. //獲取分頁條  
  37. function getPageBar(){  
  38. //頁碼大於最大頁數  
  39. if(curPage>totalPage) curPage=totalPage;  
  40. //頁碼小於1  
  41. if(curPage<1curPage=1;  
  42. pageStr = "<span>共"+total+"條</span><span>"+curPage+"/"+totalPage+"</span>";  
  43.   
  44. //如果是第一頁  
  45. if(curPage==1){  
  46. pageStr += "<span>首頁</span><span>上一頁</span>";  
  47. }else{  
  48. pageStr += "<span><a href='javascript:void(0)' rel='1'>首頁</a></span><span><a href='javascript:void(0)' rel='"+(curPage-1)+"'>上一頁</a></span>";  
  49. }  
  50.   
  51. //如果是最後頁  
  52. if(curPage>=totalPage){  
  53. pageStr += "<span>下一頁</span><span>尾頁</span>";  
  54. }else{  
  55. pageStr += "<span><a href='javascript:void(0)' rel='"+(parseInt(curPage)+1)+"'>下一頁</a></span><span><a href='javascript:void(0)' rel='"+totalPage+"'>尾頁</a></span>";  
  56. }  
  57.   
  58. $("#pagecount").html(pageStr);  
  59. }  
  60.   
  61. $(function(){  
  62. getData(1);  
  63. $("#pagecount span a").live('click',function(){  
  64. var rel = $(this).attr("rel");  
  65. if(rel){  
  66. getData(rel);  
  67. }  
  68. });  
  69. });  
  70. </script>  
  71. </head>  
  72.   
  73. <body>  
  74. <h1 class="logo"><a href="http://www.freejs.net" title="freejs首頁"><img src="../../images/logo.png" height="47" width="500" alt="freejs首頁" /></a></h1>  
  75. <div id="main_demo">  
  76. <div align="center"><h2><a href="../../article_biaodan_10.html">jQuery+Ajax+PHP+Mysql實現分頁顯示數據</a></h2></div>  
  77. <div id="main">  
  78. <div id="list">  
  79. <ul></ul>  
  80. </div>  
  81. <div id="pagecount"></div>  
  82. </div>  

pages.php

 

PHP Code
  1. <?php  
  2. include_once('conn.php');  
  3.   
  4. $page = intval($_POST['pageNum']);  
  5.   
  6. $result = mysql_query("select * from content");  
  7. $total = mysql_num_rows($result);//總記錄數  
  8.   
  9. $pageSize = 6; //每頁顯示數  
  10. $totalPage = ceil($total/$pageSize); //總頁數  
  11.   
  12. $startPage = $page*$pageSize;  
  13. $arr['total'] = $total;  
  14. $arr['pageSize'] = $pageSize;  
  15. $arr['totalPage'] = $totalPage;  
  16. $query = mysql_query("select * from content order by id asc limit $startPage,$pageSize");  
  17. while($row=mysql_fetch_array($query)){  
  18. $arr['list'][] = array(  
  19. 'id' => $row['id'],  
  20. 'title' => $row['name'],  
  21.   
  22. );  
  23. }  
  24. //print_r($arr);  
  25. echo json_encode($arr);  
  26. ?>   

 

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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章