1、制作传统分页效果
<?php
//传统分页效果实现
//连接数据库,获得数据,做分页显示
header("content-type:text/html;charset=utf-8");
$link = mysql_connect('localhost','root','123');
mysql_select_db('shop', $link);
mysql_query('set names utf8');
echo <<<eof
<style type="text/css">
table {width:700px; border:1px solid black; margin:auto; border-collapse:collapse;}
td {border:1px solid black; }
</style>
<table>
<tr style='font-weight:bold'><td>序号</td><td>名称</td><td>价格</td><td>数量</td><td>重量</td></tr>
eof;
//① 引入分页类
include "./Page.class.php";
$current = isset($_GET['page']) ? $_GET['page'] : 1;
//获取每页显示的记录数
$pagesize = 7;
$offset = ($current - 1) * $pagesize;
$sql = "select * from sw_goods limit $offset, $pagesize";
$sql2 = "select * from sw_goods";
$types = mysql_query($sql);
//获取总的记录数
$temp_i = mysql_query($sql2);
$total = mysql_num_rows($temp_i);
$page = new Page($total, $pagesize, $current, 'data.php', array());
$pageinfo = $page->showPage();
$num = ($current - 1) * $pagesize;
while($rst = mysql_fetch_assoc($types)){
printf("<tr>");
printf("<td>%d</td>",$num);
printf("<td>%s</td>",$rst['goods_name']);
printf("<td>%s</td>",$rst['goods_price']);
printf("<td>%d</td>",$rst['goods_number']);
printf("<td>%d</td>",$rst['goods_weight']);
printf("</tr>");
$temp_i++;
$num++;
}
printf("<tr><td colspan='5'>%s</td></tr>",$pageinfo);
echo "</table>";
效果图:
2、ajax实现异步分页效果
实现异步部分的php代码:
<?php
//传统分页效果实现
//连接数据库,获得数据,做分页显示
header("content-type:text/html;charset=utf-8");
$link = mysql_connect('localhost','root','123');
mysql_select_db('shop', $link);
mysql_query('set names utf8');
echo <<<eof
<style type="text/css">
table {width:700px; border:1px solid black; margin:auto; border-collapse:collapse;}
td {border:1px solid black; }
</style>
<table>
<tr style='font-weight:bold'><td>序号</td><td>名称</td><td>价格</td><td>数量</td><td>重量</td></tr>
eof;
//① 引入分页类
include "./page.class.php";
//② 获得总条数、每页显示条数
$sql = "select * from sw_goods";
$qry = mysql_query($sql);
$total = mysql_num_rows($qry); //总条数
$per = 7;//每页条数
//③ 实例化分页类对象
$page = new Page($total, $per);
//④ 设置sql语句获得每页信息
//$page->limit:分页类会根据当前页码参数自动把 "limit 偏移量,长度" 信息给拼装好
$sql3 = "select * from sw_goods order by goods_id ".$page->limit;
$qry3 = mysql_query($sql3);
//⑤ 获得页码列表信息
$page_list = $page -> fpage(array(3,4,5,6,7,8));
$page_num = isset($_GET['page'])?$_GET['page']:1;
$num = ($page_num-1)*$per+1;
while($rst3 = mysql_fetch_assoc($qry3)){
printf("<tr>");
printf("<td>%d</td>",$num);
printf("<td>%s</td>",$rst3['goods_name']);
printf("<td>%s</td>",$rst3['goods_price']);
printf("<td>%d</td>",$rst3['goods_number']);
printf("<td>%d</td>",$rst3['goods_weight']);
printf("</tr>");
$num++;
}
printf("<tr><td colspan='5'>%s</td></tr>",$page_list);
echo "</table>";
实现异步的html代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript">
//函数封装,实现ajax获取分页信息
function showpage(url){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState==4){
document.getElementById('result').innerHTML = xhr.responseText;
}
}
xhr.open('get',url);
xhr.send(null);
}
window.onload = function(){
showpage('./data.php');
}
</script>
<style type="text/css">
h2,div {width:700px; margin:auto;}
h2 {text-align:center;}
</style>
</head>
<body>
<h2>ajax无刷新分页</h2>
<div id="result"></div>
</body>
</html>
<script type="text/javascript">
<!--
document.write(new Date()+"<br />");
document.write(new Date()+"<br />");
document.write(new Date()+"<br />");
document.write(new Date()+"<br />");
//-->
</script>
分页类:
<?php
class Page {
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 "Limit ".($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;
}
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:showpage(\"{$this->uri}&page=1\")'>{$this->config["first"]}</a> ";
return $html;
}
private function prev(){
$html = "";
if($this->page==1)
$html.='';
else
$html.=" <a href='javascript:showpage(\"{$this->uri}&page=".($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='{$this->uri}&page={$page}'>{$page}</a> ";
$linkPage.=" <a href='javascript:showpage(\"{$this->uri}&page={$page}\")'>{$page}</a> ";
}
$linkPage.=" {$this->page} ";
for($i=1; $i<=$inum; $i++){
$page=$this->page+$i;
if($page<=$this->pageNum){
//$linkPage.=" <a href='{$this->uri}&page={$page}'>{$page}</a> ";
//把a超链接变为是showpage函数(ajax执行)调用
$linkPage.=" <a href='javascript:showpage(\"{$this->uri}&page={$page}\")'>{$page}</a> ";
}else{
break;
}
}
return $linkPage;
}
private function next(){
$html = "";
if($this->page==$this->pageNum)
$html.='';
else
$html.=" <a href='javascript:showpage(\"{$this->uri}&page=".($this->page+1)."\")'>{$this->config["next"]}</a> ";
return $html;
}
private function last(){
$html = "";
if($this->page==$this->pageNum)
$html.='';
else
$html.=" <a href='javascript:showpage(\"{$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;showpage(\''.$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;showpage(\''.$this->uri.'&page=\'+page+\'\')"> ';
//return ' <input type="text" οnkeydοwn="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" οnclick="javascript:var page=(this.previousSibling.value>'.$this->pageNum.')?'.$this->pageNum.':this.previousSibling.value;location=\''.$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->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;
}
}
效果图: