一、无刷新分页技术的必要性
如果我们通过“传统方式”实现上图的商品分页效果，每次分页的时候就会使得头部、左侧、底部等已经显示的信息重新从服务器获得出来，这样对带宽、服务器资源、用户等待时间都有额外的损耗。如果使用ajax无刷新分页，每次就只从服务器获得”商品评论区域“信息即可，对各方面资源的使用就有相应节省，因此ajax无刷新分页效果有其存在的必要性。
二、具体实现
商品总记录条数、每页显示多少条
mysql 数据库关键字limit
limit 偏移量，长度
偏移量：（当前页码-1）*每页显示条数
limit 0,7
limit 7,7
limit 14,7
三、制作传统分页效果
http://网址/data.php?page=1 第一页
http://网址/data.php?page=2 第二页
http://网址/data.php?page=3 第三页
服务器端data.php:
<?php
header("content-type: text/html; charset=utf-8");
error_reporting(E_ALL ^ E_DEPRECATED);
//制作传统分页效果，连接数据库，获得数据、分页显示
$link = mysql_connect('localhost', 'root','');
mysql_select_db('taobao',$link);
mysql_query('set names utf8');
//实现数据分页
//第一步：引入分页类
include("./Pagination.php");
// //第二步：获得总记录条数
$sql = "select * from dg_taobao";
$qry = mysql_query($sql);
$total = mysql_num_rows($qry);
$per = 7;
//第三步：实例化分页类对象
$page_obj = new Pagination($total, $per);
//第四步：制作sql语句，获得每页信息
//$page_obj->limit：分页类会根据当前的页码把“limit偏移量长度”给制作好
$sql3 = "select * from dg_taobao ".$page_obj->limit; //一定注意select * from dg_taobao后有一个空格，坑死我啦~~
$qry3 = mysql_query($sql3);
//第五步：获得页码列表
$page_list = $page_obj->fpage(array(3,4,5,6,7,8));
echo <<<eof
<style type="text/css">
table{width:700px; margin:auto; border:1px solid black; border-collapse:collapse}
td{border:1px solid black;}
</style>
<table>
<tr><td>序号</td><td>名称</td><td>数量</td><td>类别</td><td>重量</td></tr>
eof;
// $num = （当前页码-1）*每页条数;
$p = isset($_GET['page'])?$_GET['page']:1;
$num = ($p-1)*$per;
if($qry3){
while ($rst3 = mysql_fetch_assoc($qry3)) {
echo "<tr>";
echo "<td>".++$num."</td>";
echo "<td>".$rst3['name']."</td>";
echo "<td>".$rst3['number']."</td>";
echo "<td>".$rst3['category']."</td>";
echo "<td>".$rst3['weight']."</td>";
echo "</tr>";
}
}
echo "<tr><td colspan='5'>$page_list</td></tr>";
echo "</table>";分页类Pagination.php：
<?php
ini_set("error_reporting",E_ALL ^ E_NOTICE);
/*
* 分页类，以组件形式存在
*/
class Pagination {
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(){
if($this->page==1){
$html.='';
}
else{
$html.=" <a href='{$this->uri}&page=1'>{$this->config["first"]}</a> ";
}
return $html;
}
private function prev(){
if($this->page==1){
$html.='';
}
else{
$html.=" <a href='{$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.=" {$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> ";
else
break;
}
return $linkPage;
}
private function next(){
if($this->page==$this->pageNum)
$html.='';
else
$html.=" <a href='{$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='{$this->uri}&page=".($this->pageNum)."'>{$this->config["last"]}</a> ";
return $html;
}
private function goPage(){
return ' <input type="text" style="margin:0px 0px;width:28px;height:16px;" ο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.'"><input style="margin:0px 0px;" 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;
}
}
传统分页效果如下：每点击下方页码，浏览器的url就会改变，导致整个页面刷新。
四、制作ajax无刷新分页效果
ajax无刷新分页效果是对传统分页效果的封装
ajax对象.open('get', 'data.php?page=3');
以上是ajax通过无刷新方式获得第3页数据
主访问页index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax无刷新分页效果</title>
<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>对分页类Pagination.php的修改:
private function first(){
if($this->page==1){
$html.='';
}
else{
// $html.=" <a href='{$this->uri}&page=1'>{$this->config["first"]}</a> ";
$html.=" <a href='javascript:showpage(\"{$this->uri}&page=1\")'>{$this->config["first"]}</a> ";
}
return $html;
}
private function prev(){
if($this->page==1){
$html.='';
}
else{
// $html.=" <a href='{$this->uri}&page=".($this->page-1)."'>{$this->config["prev"]}</a> ";
$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> ";
$linkPage.=" <a href='javascript:showpage(\"{$this->uri}&page={$page}\")'>{$page}</a> ";
}
else{
break;
}
}
return $linkPage;
}
private function next(){
if($this->page==$this->pageNum)
$html.='';
else
// $html.=" <a href='{$this->uri}&page=".($this->page+1)."'>{$this->config["next"]}</a> ";
$html.=" <a href='javascript:showpage(\"{$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='{$this->uri}&page=".($this->pageNum)."'>{$this->config["last"]}</a> ";
$html.=" <a href='javascript:showpage(\"{$this->uri}&page=".($this->pageNum)."\")'>{$this->config["last"]}</a> ";
return $html;
}
private function goPage(){
// return ' <input type="text" style="margin:0px 0px;width:28px;height:16px;" ο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.'"><input style="margin:0px 0px;" type="button" value="GO" οnclick="javascript:var page=(this.previousSibling.value>'.$this->pageNum.')?'.$this->pageNum.':this.previousSibling.value;location=\''.$this->uri.'&page=\'+page+\'\'"> ';
return ' <input type="text" style="margin:0px 0px;width:28px;height:16px;" ο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.'"><input style="margin:0px 0px;" type="button" value="GO" οnclick="javascript:var page=(this.previousSibling.value>'.$this->pageNum.')?'.$this->pageNum.':this.previousSibling.value;showpage(\''.$this->uri.'&page=\'+page+\'\')"> ';
}
无刷新分页效果如下所示：
总结：
1、无刷新主要的工作是把分页类页码列表的超链接变为showpage() js函数的调用：
2、在主访问页面index.html制作一个获得分页信息的函数（ajax去获得分页信息）
另附数据库sql语句，有兴趣的小伙伴可以拿来练练手~
链接: https://pan.baidu.com/s/1Ob6CohStWBGN3M3HysiVeQ
密码: yjsm
400
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
