cell12.php 2.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title></title>
  6. <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
  7. <link rel="stylesheet" href="../style/weui.css"/>
  8. <link rel="stylesheet" href="../style/weui2.css"/>
  9. <link rel="stylesheet" href="../style/weui3.css"/>
  10. <script src="../zepto.min.js"></script>
  11. <script>
  12. $(function(){
  13. });
  14. </script>
  15. </head>
  16. <body ontouchstart>
  17. <?php
  18. include "db.php";
  19. $total = pdo_fetchcolumn('SELECT COUNT(*) FROM ' . tablename('yoby_demo') ."");
  20. $psize =10;
  21. $maxpage = ceil($total/$psize);
  22. ?>
  23. <div class="weui_cells_title">到底部点击加载分页</div>
  24. <div class="weui_cells weui_cells_access" id="rank-list"></div>
  25. <div class="weui_cells_title tcenter" id="more"><a href="javascript:;" id="getmore">点击查看更多...</a></div>
  26. <script id="tpl" type="text/html">
  27. <% for(var i in list) { %>
  28. <a class="weui_cell " href="javascript:;">
  29. <div class="weui_cell_bd weui_cell_primary">
  30. <p><%=list[i].id%>姓名<%=list[i].title%>手机<%=list[i].phone%><br><%=list[i].fen%></p>
  31. </div>
  32. </a>
  33. <% } %>
  34. </script>
  35. <script>
  36. function ajaxpage(page,maxpage){
  37. $.ajax({
  38. type : "GET",
  39. url : 'page1.php?page='+page,
  40. dataType : "json",
  41. success : function(rs) {
  42. var tplx = document.getElementById('tpl').innerHTML;
  43. var desc1=tpl(tplx,rs);
  44. $("#rank-list").append(desc1);
  45. if(page==maxpage){
  46. $("#more").html("没有更多数据了");return false;
  47. }
  48. },
  49. timeout : 15000
  50. });
  51. }
  52. $(function(){
  53. var page = 2;
  54. var maxpage =<?php echo $maxpage ?>;//总页数
  55. $('#getmore').on('click', function() {
  56. if(page<=maxpage) {
  57. ajaxpage(page,maxpage);
  58. page++;
  59. }
  60. });
  61. ajaxpage(1,maxpage);
  62. })
  63. </script>
  64. </body>
  65. </html>