分页ajax

Posted on Posted in js
Tips: 本文创建于2014年5月31日,已超过 2 年,内容或图片可能已经失效!

> index.html

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
  2. <html>  
  3. <head>  
  4. <title>新建网页</title>  
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  6. <meta name="description" content="" />  
  7. <meta name="keywords" content="" />  
  8.   
  9. <script type="text/javascript">  
  10. //根据传递参数的不同,可以获得具体页码信息  
  11. function showpage(url){  
  12. //ajax请求分页信息  
  13. var xhr = new XMLHttpRequest();  
  14.   
  15. xhr.onreadystatechange = function(){  
  16. if(xhr.readyState==4 && xhr.status==200){  
  17. //alert(xhr.responseText);  
  18. document.getElementById('show').innerHTML = xhr.responseText;  
  19. }  
  20. }  
  21. xhr.open("get",url);  
  22. xhr.send(null);  
  23. }  
  24.   
  25. window.onload = function(){  
  26. showpage("./data.php");  
  27. }  
  28. </script>  
  29.   
  30. <style type="text/css">  
  31. </style>  
  32. </head>  
  33.   
  34.   
  35. <body>  
  36. <h2>ajax无刷新分页效果</h2>  
  37. <div id="show"></div>  
  38. </body>  
  39. </html>  
  40. <script type="text/javascript">  
  41. document.write(new Date()+"<br />");  
  42. document.write(new Date()+"<br />");  
  43. document.write(new Date()+"<br />");  
  44. document.write(new Date()+"<br />");  
  45. </script>  

> data.php

  1. <?php  
  2. // 传统分页实现  
  3. header ( "content-type:text/html;charset=utf-8" );  
  4. $link = mysql_connect ( 'localhost', 'root', 'password' );  
  5. mysql_select_db ( 'test', $link );  
  6. mysql_query ( "set names utf8" );  
  7.   
  8. include "./page.class.php";  
  9.   
  10. $sql = "select * from sw_goods";  
  11. $qry = mysql_query ( $sql );  
  12.   
  13. // ① 获得记录总条数  
  14. $total = mysql_num_rows ( $qry );  
  15. $per = 10;  
  16.   
  17. // ② 实例化分页类对象  
  18. $page_obj = new Page ( $total$per );  
  19.   
  20. // ③ 拼装获得每页数据的sql语句  
  21. // 在分页类对象里边有属性limit,可以灵活获得"limit 偏移量,长度"信息  
  22. $sqla = "select * from sw_goods " . $page_obj->limit;  
  23. $qrya = mysql_query ( $sqla );  
  24.   
  25. // ④ 通过分页对象调用方法获得页面列表  
  26. $pagelist = $page_obj->fpage ( array (  
  27. 3,  
  28. 4,  
  29. 5,  
  30. 6,  
  31. 7,  
  32. 8   
  33. ) );  
  34.   
  35. echo '  
  36. <style type="text/css">  
  37. table {width:700px; border:1px solid black; margin:auto; border-collapse:collapse;}  
  38. td {border:1px solid black; background-color:pink;}  
  39. </style>  
  40. ';  
  41. echo "<table>";  
  42. echo " 
  43. <tr><td>序号</td><td>名称</td><td>价格</td><td>数量</td><td>重量</td></tr> 
  44. ";  
  45. $i = 0;  
  46. while ( $rsta = mysql_fetch_assoc ( $qrya ) ) {  
  47. echo "<tr>";  
  48. echo "<td>" . ++ $i . "</td>";  
  49. echo "<td>" . $rsta ['goods_name'] . "</td>";  
  50. echo "<td>" . $rsta ['goods_price'] . "</td>";  
  51. echo "<td>" . $rsta ['goods_number'] . "</td>";  
  52. echo "<td>" . $rsta ['goods_weight'] . "</td>";  
  53. echo "</tr>";  
  54. }  
  55. echo "<tr><td colspan=5>" . $pagelist . "</td></tr>";  
  56. echo "</table>";  

> page.class.php

  1. <?php  
  2. class Page {  
  3. private $total// 数据表中总记录数  
  4. private $listRows// 每页显示行数  
  5. private $limit;  
  6. private $uri;  
  7. private $pageNum// 页数  
  8. private $config = array (  
  9. 'header' => "个记录",  
  10. "prev" => "上一页",  
  11. "next" => "下一页",  
  12. "first" => "首 页",  
  13. "last" => "尾 页"   
  14. );  
  15. private $listNum = 8;  
  16. /* 
  17. * $total $listRows 
  18. */  
  19. public function __construct($total$listRows = 10, $pa = "") {  
  20. $this->total = $total;  
  21. $this->listRows = $listRows;  
  22. $this->uri = $this->getUri ( $pa );  
  23. $this->page = ! emptyempty ( $_GET ["page"] ) ? $_GET ["page"] : 1;  
  24. $this->pageNum = ceil ( $this->total / $this->listRows );  
  25. $this->limit = $this->setLimit ();  
  26. }  
  27. private function setLimit() {  
  28. return "Limit " . ($this->page - 1) * $this->listRows . ", {$this->listRows}";  
  29. }  
  30. private function getUri($pa) {  
  31. $url = $_SERVER ["REQUEST_URI"] . (strpos ( $_SERVER ["REQUEST_URI"], '?' ) ? '' : "?") . $pa;  
  32. $parse = parse_url ( $url );  
  33.   
  34. if (isset ( $parse ["query"] )) {  
  35. parse_str ( $parse ['query'], $params );  
  36. unset ( $params ["page"] );  
  37. $url = $parse ['path'] . '?' . http_build_query ( $params );  
  38. }  
  39.   
  40. return $url;  
  41. }  
  42. function __get($args) {  
  43. if ($args == "limit")  
  44. return $this->limit;  
  45. else  
  46. return null;  
  47. }  

  48. private
     function start() {  
  49. if ($this->total == 0)  
  50. return 0;  
  51. else  
  52. return ($this->page - 1) * $this->listRows + 1;  
  53. }  
  54. private function end() {  
  55. return min ( $this->page * $this->listRows, $this->total );  
  56. }  
  57. private function first() {  
  58. $html = "";  
  59. if ($this->page == 1)  
  60. $html .= '';  
  61. else  
  62. $html .= "&nbsp;&nbsp;<a href='javascript:void(0)' onclick='showpage(\"{$this->uri}&page=1\")'>{$this->config["first"]}</a>&nbsp;&nbsp;";  
  63.   
  64. return $html;  
  65. }  
  66. private function prev() {  
  67. $html = "";  
  68. if ($this->page == 1)  
  69. $html .= '';  
  70. else  
  71. $html .= "&nbsp;&nbsp;<a href='javascript:void(0)' onclick='showpage(\"{$this->uri}&page=" . ($this->page - 1) . "\")'>{$this->config["prev"]}</a>&nbsp;&nbsp;";  
  72.   
  73. return $html;  
  74. }  
  75. private function pageList() {  
  76. $linkPage = "";  
  77.   
  78. $inum = floor ( $this->listNum / 2 );  
  79.   
  80. for($i = $inum$i >= 1; $i --) {  
  81. $page = $this->page - $i;  
  82.   
  83. if ($page < 1)  
  84. continue;  
  85.   
  86. // $linkPage.="&nbsp;<a href='{$this->uri}&page={$page}'>{$page}</a>&nbsp;";  
  87. $linkPage .= "&nbsp;<a href='javascript:void(0)' onclick='showpage(\"{$this->uri}&page={$page}\")'>{$page}</a>&nbsp;";  
  88. }  
  89.   
  90. $linkPage .= "&nbsp;{$this->page}&nbsp;";  
  91.   
  92. for($i = 1; $i <= $inum$i ++) {  
  93. $page = $this->page + $i;  
  94. // 取消超链接效果,变为执行onclick事件(showpage函数执行)的效果  
  95. if ($page <= $this->pageNum) {  
  96. // $linkPage.="&nbsp;<a href='{$this->uri}&page={$page}'>{$page}</a>&nbsp;";  
  97. $linkPage .= "&nbsp;<a href='javascript:void(0)' onclick='showpage(\"{$this->uri}&page={$page}\")'>{$page}</a>&nbsp;";  
  98. else {  
  99. break;  
  100. }  
  101. }  
  102.   
  103. < span class="keyword">return $linkPage;  
  104. }  
  105. private function next() {  
  106. $html = "";  
  107. if ($this->page == $this->pageNum)  
  108. $html .= '';  
  109. else  
  110. $html .= "&nbsp;&nbsp;<a href='javascript:void(0)' onclick='showpage(\"{$this->uri}&page=" . ($this->page + 1) . "\")'>{$this->config["next"]}</a>&nbsp;&nbsp;";  
  111.   
  112. return $html;  
  113. }  
  114. private function last() {  
  115. $html = "";  
  116. if ($this->page == $this->pageNum)  
  117. $html .= '';  
  118. else  
  119. $html .= "&nbsp;&nbsp;<a href='javascript:void(0)' onclick='showpage(\"{$this->uri}&page=" . ($this->pageNum) . "\")'>{$this->config["last"]}</a>&nbsp;&nbsp;";  
  120.   
  121. return $html;  
  122. }  
  123. private function goPage() {  
  124. // return '&nbsp;&nbsp;<input type="text" onkeydown="javascript:if(event.keyCode==13){var page=(this.value>'.$this->pageNum.')?'.$this->pageNum.':this.value;location=\''.$this->uri.'&page=\'+page+\'\'}" value="'.$this->page.'" style="width:25px"><input type="button" value="GO" onclick="javascript:var page=(this.previousSibling.value>'.$this->pageNum.')?'.$this->pageNum.':this.previousSibling.value;location=\''.$this->uri.'&page=\'+page+\'\'">&nbsp;&nbsp;';  
  125. return '&nbsp;&nbsp;<input type="text" onkeydown="javascript:if(event.keyCode==13){var page=(this.value>' . $this->pageNum . ')?' . $this->pageNum . ':this.value;showpage(\'' . $this->uri . '&page=\'+page+\'\')}" value="' . $this->page . '" style="width:25px"><input type="button" value="GO" onclick="javascript:var page=(this.previousSibling.value>' . $this->pageNum . ')?' . $this->pageNum . ':this.previousSibling.value;showpage(\'' . $this->uri . '&page=\'+page+\'\')">&nbsp;&nbsp;';  
  126. }  
  127. function fpage($display = array(0,1,2,3,4,5,6,7,8)) {  
  128. $html [0] = "&nbsp;&nbsp;共有<b>{$this->total}</b>{$this->config["header"]}&nbsp;&nbsp;";  
  129. $html [1] = "&nbsp;&nbsp;每页显示<b>" . ($this->end () - $this->start () + 1) . "</b>条,本页<b>{$this->start()}-{$this->end()}</b>条&nbsp;&nbsp;";  
  130. $html [2] = "&nbsp;&nbsp;<b>{$this->page}/{$this->pageNum}</b>页&nbsp;&nbsp;";  
  131.   
  132. $html [3] = $this->first ();  
  133. $html [4] = $this->prev ();  
  134. $html [5] = $this->pageList ();  
  135. $html [6] = $this->next ();  
  136. $html [7] = $this->last ();  
  137. $html [8] = $this->goPage ();  
  138. $fpage = '';  
  139. foreach ( $display as $index ) {  
  140. $fpage .= $html [$index];  
    ;
  141. }  
  142.   
  143. return $fpage;  
  144. }  
  145. }  
» 转载请注明来源:若我若鱼 » 分页ajax

Leave a Reply

Your email address will not be published. Required fields are marked *

eight + six =