1)前台显示模板:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Ajax 实现无刷新页面</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="__ROOT__/statics/js/jquery.js"></script> <!-- 载入 Ajax 类库 --> <style type="text/css"> body { font-size:12px; } </style> </head> <body> <div id="fpage">数据加载中...</div> </body> </html> <script type="text/javascript"> /** * setPage(url) 根据 url 从 __URL__/ajax 中获取数据 * @param int pageNum 页码 * @return string */ var cache=new Array(); // 缓存变量,当数据被访问过之后放置在缓存中,加快访问速度 function setPage(pageNum) { var fpage = document.getElementById('fpage'); // 获取 fpage 对象 // 如果缓存中存在数据,那么直接从缓存中读取;如果不存在数据,那么就从数据库中读取,并把数据存入缓存 if (typeof(cache[pageNum])=='undefined') { /*var ajax = Ajax(); ajax.get("__URL__/ajax?page="+pageNum, function(data){ fpage.innerHTML = data; // fpage对象的内容是从 article.php 中取来的 cache[pageNum] = data; })*/ $.ajax({ type:"GET", url:"__URL__/ajax", data:"page="+pageNum, beforeSend:function(){ $('#fpage').html("正在努力加载中..."); }, success:function(data){ fpage.innerHTML = data; // fpage对象的内容是从 article.php 中取来的 cache[pageNum] = data; } }); } else { fpage.innerHTML = cache[pageNum]; } } setPage(1); // 默认执行 </script>
2)后台控制器中的方法:
<?php public function ajaxpage(){ $this->display(":ajaxpage"); } public function ajax(){ sleep(2); $m=M('article'); $page= new \Think\AjaxPage($m->count(),20); $result=$m->limit("$page->limit")->select(); echo '<table align="center" border="1" width="1100" style="border-collapse:collapse;font-size:14px;" bordercolor="#666">'; echo '<caption><h1>资讯</h1></caption>'; echo '<tr height="25"><th>ID</th><th>Title</th><th>Author</th><th>Source</th><th>Date</th></tr>'; foreach ($result as $v) { echo "<tr height='21'><td align='center'>{$v['id']}</td><td>{$v['title']}</td><td align='center'>{$v['author']}</td><td align='center'>{$v['source']}</td><td align='center'>{$v['date']}</td></tr>"; } echo '<tr><td align="right" colspan="5">'.$page->fpage().'</td></tr>'; echo '</table>'; }
3)ajax无刷新分页类:
<?php namespace Think; class ajaxPage { private $total; //数据表中总记录数 private $listRows;//每页显示行数 private $limit; private $uri; private $pageNum; //页数 private $config=array('header'=>"个记录", "prev"=>"上一页", "next"=>"下一页", "first"=>"首 页", "last"=>"尾 页"); private $listNum=8; /* * $total * $listRows */ public function __construct($total, $listRows=10, $pa=""){ $this->total=$total; $this->listRows=$listRows; $this->uri=$this->getUri($pa); $this->page=!empty($_GET["page"]) ? $_GET["page"] : 1; $this->pageNum=ceil($this->total/$this->listRows); $this->limit=$this->setLimit(); } private function setLimit(){ return ($this->page-1)*$this->listRows.", {$this->listRows}"; } private function getUri($pa){ $url=$_SERVER["REQUEST_URI"].(strpos($_SERVER["REQUEST_URI"], '?')?'':"?").$pa; $parse=parse_url($url); if(isset($parse["query"])){ parse_str($parse['query'],$params); unset($params["page"]); $url=$parse['path'].'?'.http_build_query($params); } return $url; } private function __get($args){ if($args=="limit") return $this->limit; else return null; } private function start(){ if($this->total==0) return 0; else return ($this->page-1)*$this->listRows+1; } private function end(){ return min($this->page*$this->listRows,$this->total); } private function first(){ $html=""; if($this->page==1) $html.=''; else $html.=" <a href='javascript:setPage(1)'>{$this->config["first"]}</a> "; return $html; } private function prev(){ $html=""; if($this->page==1) $html.=''; else $html.=" <a href='javascript:setPage(". ($this->page-1) .")'>{$this->config["prev"]}</a> "; return $html; } private function pageList(){ $linkPage=""; $inum=floor($this->listNum/2); for($i=$inum; $i>=1; $i--){ $page=$this->page-$i; if($page<1) continue; $linkPage.=" <a href='javascript:setPage({$page})'>{$page}</a> "; } $linkPage.=" {$this->page} "; for($i=1; $i<=$inum; $i++){ $page=$this->page+$i; if($page<=$this->pageNum) $linkPage.=" <a href='javascript:setPage({$page})'>{$page}</a> "; else break; } return $linkPage; } private function next(){ $html=""; if($this->page==$this->pageNum) $html.=''; else $html.=" <a href='javascript:setPage(". ($this->page+1) .")'>{$this->config["next"]}</a> "; return $html; } private function last(){ $html=""; if($this->page==$this->pageNum) $html.=''; else $html.=" <a href='javascript:setPage(". ($this->pageNum) .")'>{$this->config["last"]}</a> "; return $html; } private function goPage(){ return ' <input type="text" onkeydown="javascript:if(event.keyCode==13){var page=(this.value>'.$this->pageNum.')?'.$this->pageNum.':this.value;setPage(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;setPage(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->end()-$this->start()+1)."</b>条,本页<b>{$this->start()}-{$this->end()}</b>条 "; $html[2]=" <b>{$this->page}/{$this->pageNum}</b>页 "; $html[3]=$this->first(); $html[4]=$this->prev(); $html[5]=$this->pageList(); $html[6]=$this->next(); $html[7]=$this->last(); $html[8]=$this->goPage(); $fpage=''; foreach($display as $index){ $fpage.=$html[$index]; } return $fpage; } }