无刷新分页的主要工作是将页码列表的超链接通过js函数进行调用.
制作传统分页类:
1,首先创建一个静态页面
2,创建分页列表信息
①引入数据分页类
②获得数据库中商品的总记录条数,并设置每页查询的记录
③传入商品的总记录条数和每页数量,将分页类实例化
④制作sql语句从商品中获得名称,价格,数量,重量. 然后进行mysql语句查询,将结果返回到$qry3中
⑤获得页码的列表
3,将查询到的信息进行整合
① 制作table表格,用来存放查询的商品
② 将每页的商品信息装入table表格
③将页码列表同样装入table表格
4,将后台传入的数据进行接收,并显示到面板中
重点:进行数据页码列表的超链接修改
例‘下一页‘:
图中代码意思为:"点击下一页,页面跳转到page参数的下一位".
地址栏显示为:
重点为页面进行了跳转,为了避免页面进行跳转,将代码改为js方法进行页面调用显示,其他地方不进行改变.
改动方法为:通过js调用showpage方法,并传递当前uri地址
<a href=‘javascript:showpage(\"{$this->uri}&page=".($this->page+1)."\")‘>
改动后地址栏显示为:
源码部分:
1 <?php 2 class Page { 3 private $total; //数据表中总记录数 4 private $listRows; //每页显示行数 5 private $limit; 6 private $uri; 7 private $pageNum; //页数 8 private $config=array(‘header‘=>"个记录", "prev"=>"上一页", "next"=>"下一页", "first"=>"首 页", "last"=>"尾 页"); 9 private $listNum=8; 10 /* 11 * $total 12 * $listRows 13 */ 14 public function __construct($total, $listRows=10, $pa=""){ 15 $this->total=$total; 16 $this->listRows=$listRows; 17 $this->uri=$this->getUri($pa); 18 $this->page=!empty($_GET["page"]) ? $_GET["page"] : 1; 19 $this->pageNum=ceil($this->total/$this->listRows); 20 $this->limit=$this->setLimit(); 21 } 22 23 private function setLimit(){ 24 return "Limit ".($this->page-1)*$this->listRows.", {$this->listRows}"; 25 } 26 27 private function getUri($pa){ 28 $url=$_SERVER["REQUEST_URI"].(strpos($_SERVER["REQUEST_URI"], ‘?‘)?‘‘:"?").$pa; 29 $parse=parse_url($url); 30 31 32 33 if(isset($parse["query"])){ 34 parse_str($parse[‘query‘],$params); 35 unset($params["page"]); 36 $url=$parse[‘path‘].‘?‘.http_build_query($params); 37 38 } 39 40 return $url; 41 } 42 43 function __get($args){ 44 if($args=="limit") 45 return $this->limit; 46 else 47 return null; 48 } 49 50 private function start(){ 51 if($this->total==0) 52 return 0; 53 else 54 return ($this->page-1)*$this->listRows+1; 55 } 56 57 private function end(){ 58 return min($this->page*$this->listRows,$this->total); 59 } 60 61 private function first(){ 62 $html = ""; 63 if($this->page==1) 64 $html.=‘‘; 65 else 66 // $html.=" <a href=‘{$this->uri}&page=1‘>{$this->config["first"]}</a> "; 67 $html.=" <a href=‘javascript:showpage(\"{$this->uri}&page=1\")‘>{$this->config["first"]}</a> "; 68 69 return $html; 70 } 71 72 private function prev(){ 73 $html = ""; 74 if($this->page==1) 75 $html.=‘‘; 76 else 77 // $html.=" <a href=‘{$this->uri}&page=".($this->page-1)."‘>{$this->config["prev"]}</a> "; 78 $html.=" <a href=‘javascript:showpage(\"{$this->uri}&page=".($this->page-1)."\")‘>{$this->config["prev"]}</a> "; 79 80 return $html; 81 } 82 83 private function pageList(){ 84 $linkPage=""; 85 86 $inum=floor($this->listNum/2); 87 88 for($i=$inum; $i>=1; $i--){ 89 $page=$this->page-$i; 90 91 if($page<1) 92 continue; 93 94 // $linkPage.=" <a href=‘{$this->uri}&page={$page}‘>{$page}</a> "; 95 $linkPage.=" <a href=‘javascript:showpage(\"{$this->uri}&page={$page}\")‘>{$page}</a> "; 96 97 } 98 99 $linkPage.=" {$this->page} "; 100 101 102 for($i=1; $i<=$inum; $i++){ 103 $page=$this->page+$i; 104 if($page<=$this->pageNum){ 105 // $linkPage.=" <a href=‘{$this->uri}&page={$page}‘>{$page}</a> "; 106 $linkPage.=" <a href=‘javascript:showpage(\"{$this->uri}&page={$page}\")‘>{$page}</a> "; 107 } 108 else 109 break; 110 } 111 112 return $linkPage; 113 } 114 115 private function next(){ 116 $html = ""; 117 if($this->page==$this->pageNum) 118 $html.=‘‘; 119 else 120 $html.=" <a href=‘{$this->uri}&page=".($this->page+1)."‘>{$this->config["next"]}</a> "; 121 // $html.=" <a href=‘javascript:showpage(\"{$this->uri}&page=".($this->page+1)."\")‘>{$this->config["next"]}</a> "; 122 123 return $html; 124 } 125 126 private function last(){ 127 $html = ""; 128 if($this->page==$this->pageNum) 129 $html.=‘‘; 130 else 131 // $html.=" <a href=‘{$this->uri}&page=".($this->pageNum)."‘>{$this->config["last"]}</a> "; 132 $html.=" <a href=‘javascript:showpage(\"{$this->uri}&page=".($this->pageNum)."\")‘>{$this->config["last"]}</a> "; 133 134 return $html; 135 } 136 137 private function goPage(){ 138 // return ‘ <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+\‘\‘"> ‘; 139 return ‘ <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+\‘\‘)"> ‘; 140 } 141 function fpage($display=array(0,1,2,3,4,5,6,7,8)){ 142 $html[0]=" 共有<b>{$this->total}</b>{$this->config["header"]} "; 143 $html[1]=" 每页显示<b>".($this->end()-$this->start()+1)."</b>条，本页<b>{$this->start()}-{$this->end()}</b>条 "; 144 $html[2]=" <b>{$this->page}/{$this->pageNum}</b>页 "; 145 146 $html[3]=$this->first(); 147 $html[4]=$this->prev(); 148 $html[5]=$this->pageList(); 149 $html[6]=$this->next(); 150 $html[7]=$this->last(); 151 $html[8]=$this->goPage(); 152 $fpage=‘‘; 153 foreach($display as $index){ 154 $fpage.=$html[$index]; 155 } 156 157 return $fpage; 158 159 } 160 161 162 }
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 5 <title>Ajax无刷新分页效果</title> 6 <style type="text/css"> 7 h2,div{ 8 width:700px; 9 margin: auto; 10 } 11 h2{ 12 text-align: center; 13 } 14 </style> 15 16 <script type="text/javascript"> 17 18 function showpage(url){ 19 var ajx = new XMLHttpRequest(); 20 ajx.onreadystatechange = function(){ 21 if(ajx.readyState == 4){ 22 document.getElementById("result").innerHTML = ajx.responseText; 23 } 24 } 25 ajx.open("get",url); 26 ajx.send(null); 27 } 28 29 window.onload = function(){ 30 showpage("./09-data.php"); 31 } 32 33 </script> 34 </head> 35 <body> 36 <h2>Ajax无刷新分页效果</h2> 37 <div id="result"></div> 38 </body> 39 </html>
1 <?php 2 3 //制作传统分页效果,连接数据库,获得数据,分页显示 4 5 $link = @mysql_connect("localhost","root",""); 6 7 mysql_select_db("shopping",$link); 8 9 mysql_query(‘set names utf8‘); 10 11 //实现数据分页 12 // 1.引入分页类 13 include("./Page.class.php"); 14 15 //2.获得总记录条数 16 $sql = "select * from sw_goods"; 17 $qry = mysql_query($sql); 18 $total = mysql_num_rows($qry); 19 $per = 7; 20 21 //3.实例化分页类对象 22 $page_obj = new Page($total,$per); 23 24 //4.制作sql语句,获得每页信息 25 $sql3 = "select goods_name,goods_price,goods_number,goods_weight from sw_goods ".$page_obj->limit; 26 $qry3 = mysql_query($sql3); 27 28 //5.获得页码列表 29 $pagelist = $page_obj->fpage(array(3,4,5,6,7,8)); 30 31 echo <<<eof 32 <style type="text/css"> 33 table{ 34 width:700px; 35 margin:auto; 36 border:1px solid black; 37 border-collapse:collapse; 38 } 39 td{ 40 border:1px solid black; 41 } 42 </style> 43 <table><tr><td>序号</td><td>名称</td><td>价格</td><td>数量</td><td>重量</td></tr> 44 eof; 45 46 $p = isset($_GET[‘page‘])?$_GET[‘page‘] : 1; 47 $num = ($p-1)*$per; 48 while($rst3 = mysql_fetch_assoc($qry3)){ 49 echo "<tr>"; 50 echo "<td>".++$num."</td>"; 51 echo "<td>".$rst3[‘goods_name‘]."</td>"; 52 echo "<td>".$rst3[‘goods_price‘]."</td>"; 53 echo "<td>".$rst3[‘goods_number‘]."</td>"; 54 echo "<td>".$rst3[‘goods_weight‘]."</td>"; 55 echo "</tr>"; 56 } 57 58 echo "<tr><td colspan=‘5‘>$pagelist</td></tr>"; 59 echo "</table>"; 60 61 62 ?>
原文：http://www.cnblogs.com/3-tu/p/6291402.html
