前面写过一个分页类。这段时间在学ajax，老师讲到一个实例，那就是ajax实现无刷新分页类，分享一下。
实现过程不难理解，但是确实有些复杂，而且老师习惯用正则，我又不懂正则，不过基本上我还是很清楚的，后续该加强加强正则和js。
实现过程：
一、发送请求页面
<script src="ajax.js" type="text/javascript" charset="utf-8"></script>
<div id="page">
数据加载中..........
</div>
<hr>
<script type="text/javascript" charset="utf-8">
var cache = new Array(); //用数组做缓存，避免重复请求
function setPage(url){
var ajax =Ajax(); //new一个ajax对象
var obj=document.getElementById("page");//找到标签id
if(typeof(cache[url]) == "undefined"){//判断是否取过
ajax.get(url,function(data){//把数据放到div里面
obj.innerHTML=data;
cache[url]=data; //缓存起来
});
//alert(url);
}else{
obj.innerHTML=cache[url]; //直接从缓存数组取出即可
}
}
setPage("demo.php?page=1");
</script>
<script type="text/javascript" charset="utf-8">
document.write(new Date()+"<br />"); //显示时间，用来证明
document.write(new Date()+"<br />");
document.write(new Date()+"<br />");
</script>二、服务器端的请求页面
//创建分页类对象
$page=new Page($result->num_rows,10);
$sql="select id,name,price,num,desn from shops order by id ".$page->limit."";
$result=$mysqli->query($sql);
echo '<table align="center" border="1" width=900>';
echo '<caption><h1>商品列表</h1></caption>';
echo '<tr><th>ID</th><th>name</th><th>price</th><th>num</th><th>desn</th></tr>';
while($row=$result->fetch_assoc()){ //每一行数据
echo '<tr>';
foreach($row as $col){ //每一字段
echo '<td>'.$col.'</td>';
}
echo '</tr>';
}
echo '<tr><td align="right" colspan="5">'.$page->fpage().'</td></tr>';
echo '</table>';
三、我们的分页类
<?php
class Page{
private $total; //数据表中总记录数
private $listRows; //每页显示行数
private $limit; //限制条数
private $uri; //当前页的URL
private $pageNum; //一共多少页
private $page; //当前页
private $config =array('header'=>"记录","prev"=>"上一页","next"=>"下一页","first"=>"首页","last"=>"尾页");//显示配置
private $listNum=5; //同时显示页数最多为5页
/*
*$total
*$listRows
*$pa 预留用户自己加参
*/
public function __construct($total,$listRows=10,$pa=""){
$this->total=$total; //获取总数
$this->listRows=$listRows; //获取单页显示数
$this->uri=$this->getUri($pa); //获取过滤掉page后的url
$this->page=!empty($_GET["page"])?$_GET["page"]:1; //获取当前页，没有默认1
$this->pageNum=ceil($total/$listRows); //页数
$this->limit=$this->setLimit(); //获取limit
//var_dump($this);
}
//设置计算拼凑limit
private function setLimit(){
return "limit ".($this->page-1)*$this->listRows." ,". $this->listRows;
}
//获取当前页的url,处理掉url里面的page参数
private function getUri($pa){
//判断这个url里有没有？号，然后好添加数据
$url = $_SERVER['REQUEST_URI'].(strpos($_SERVER["REQUEST_URI"],'?')?'':"?").$pa;
//得到url的数组 Array ( [path] => /pageclass/test.php [query] => page=1 )
$parse =parse_url($url);
//判断是否有参数,干掉url中的page参数
if(isset($parse['query'])){
//把字符串以&拆分成数组
parse_str($parse['query'],$params);
//unset掉数组中的page单元，不管有没有
unset($params["page"]);
//再把数组中的键值以&连接起来成字符串
http_build_query($params);
//拼接URL
$url = $parse['path'].'?'.http_build_query($params);
}
return $url;
}
//用它来调用私有变量
function __get($args){
if($args=='limit')
return $this->limit;
else
return null;
}
/********************处理显示样式*********************/
//每页开始显示的第一条页码
private function start(){
if($this->total == 0)
return 0;
else if($this->page<=$this->pageNum)
return ($this->page-1)*$this->listRows+1;
}
//每页开始显示的最后一条页码。主要考虑最后一页
private function ends(){
if($this->page<=$this->pageNum){
return min($this->page*$this->listRows,$this->total);
}
}
//每页显示多少条
private function perNum(){
if($this->page<=$this->pageNum){
return $this->ends() - $this->start() +1;
}
}
//*******页码显示系列
//首页
private function first(){
if($this->page == 1){
$html='';
}else{
$html=" <a href='javascript:setPage(\"{$this->uri}&page=1\")'>".$this->config['first']."</a> ";
}
return $html;
}
//前一页
private function preve(){
if($this->page == 1){
$html='';
}else{
$html=" <a href='javascript:setPage(\"{$this->uri}&page=".($this->page-1)."\")'>".$this->config['prev']."</a> ";
}
return $html;
}
//****页码列表****
private function pageList(){
$linkPage="";
$mid=floor($this->listNum/2); //最多显示页数/2，向下取整
for($i=$mid;$i>=1;$i--){ //当前页前面的
$page=$this->page-$i;
if($page<1){
continue;
}
$linkPage.=" <a href='javascript:setPage(\"{$this->uri}&page={$page}\")'>{$page}</a> ";
}
$linkPage.=" ".$this->page." "; //当前页
for($i=1;$i<=$mid;$i++){
$page=$this->page + $i; //当前页后面的
if($page<=$this->pageNum){
$linkPage.=" <a href='javascript:setPage(\"{$this->uri}&page={$page}\")'>{$page}</a> ";
}else{
break;
}
}
return $linkPage;
}
//下一页
private function nexts(){
if($this->page == $this->pageNum){
$html='';
}else{
$html=" <a href='javascript:setPage(\"{$this->uri}&page=".($this->page+1)."\")'>".$this->config['next']."</a> ";
}
return $html;
}
//最后一页
private function last(){
if($this->page == $this->pageNum){
$html='';
}else{
$html=" <a href='javascript:setPage(\"{$this->uri}&page=".($this->pageNum)."\")'>".$this->config['last']."</a> ";
}
return $html;
}
//**直达那一页**
private function goPage(){
return ' <input type="text" οnkeydοwn="javascript:if(event.keyCode==13){var page=(this.value>'.$this->pageNum.')?'.$this->pageNum.':this.value;setPage(\''.$this->uri.'&page=\'+page+\'\')}" value="'.$this->page.'" style="width:25px"><input type="button" value="GO" οnclick="javascript:var page=(this.previousSibling.value>'.$this->pageNum.')?'.$this->pageNum.':this.previousSibling.value;setPage(\''.$this->uri.'&page=\'+page+\'\')"> ';
}
//输出样式处理
function fpage($display=array(0,1,2,3,4,5,6,7,8)){
$html[0]=" 共有<b>{$this->total}</b>{$this->config['header']} ";
$html[1]=" 本页显示<b>{$this->perNum()}</b>条，本页<b>{$this->start()}-{$this->ends()}</b> ";
$html[2]=" <b>"."$this->page/$this->pageNum"."</b> ";
$html[3]=$this->first();
$html[4]=$this->preve();
$html[5]=$this->pageList();
$html[6]=$this->nexts();
$html[7]=$this->last();
$html[8]=$this->goPage();
$fpage='';
foreach($display as $index){
$fpage.=$html[$index];
}
return $fpage;
}
}
?>整个过程请求、相应、无刷新分页实现。我们的分页类（相比前面实现的分页类，我们做了一些改变。主要就是把”请求url“，用 ajax页面里面的setPage()替换掉href还有location等这些url，让ajax去请求，而不是自己去请求。原理就是这样）
截个图吧，实现之后的，看一下，页面动了，但是时间没有改变。
然后改变一下页码
好了，有问题，多多指教。把代码可以粘贴测试一下，我这OK。
扫一扫
182
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
