zoukankan      html  css  js  c++  java

  • 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<1) curPage=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

  • 相关阅读:
    USB HID Report Descriptor 报告描述符详解
    USB 管道 && 端点
    USB描述符解析-->枚举.
    USB HID介绍
    USB2.0速度识别
    spring core
    好妈妈【第三章】一生受用的品格教育，不止孩子需要，父母也需要。
    好妈妈【第二章】把学习做成轻松的事，父母如何提升孩子的学习成绩
    好妈妈【第一章】提高爱的质量，小学前的儿童教育
    Java日志系统
  • 原文地址：https://www.cnblogs.com/james1207/p/3310579.html
Copyright © 2011-2022 走看看