Ajax实现无刷新分页效果

一、无刷新分页技术的必要性

  如果我们通过“传统方式”实现上图的商品分页效果，每次分页的时候就会使得头部、左侧、底部等已经显示的信息重新从服务器获得出来，这样对带宽、服务器资源、用户等待时间都有额外的损耗。如果使用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:

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 <<
	table{width:700px; margin:auto; border:1px solid black; border-collapse:collapse}
	td{border:1px solid black;}

	
eof;
// $num = （当前页码-1）*每页条数;
$p = isset($_GET['page'])?$_GET['page']:1;
$num = ($p-1)*$per;
if($qry3){
	while ($rst3 = mysql_fetch_assoc($qry3)) {
	echo "";
	echo "";
	echo "";
	echo "";
	echo "";
	echo "";
	echo "";
}
}
echo "";
echo "

		
序号
名称
数量
类别
重量
".++$num."
".$rst3['name']."
".$rst3['number']."
".$rst3['category']."
".$rst3['weight']."
$page_list
";

分页类Pagination.php：

"个记录", "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.="  {$this->config["first"]}  ";
                        }
			return $html;
		}

		private function prev(){
			if($this->page==1){
				$html.='';
                        }
			else{
				$html.="  {$this->config["prev"]}  ";
                        }
			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.=" {$page} ";

			}
		
			$linkPage.=" {$this->page} ";
			

			for($i=1; $i<=$inum; $i++){
				$page=$this->page+$i;
				if($page<=$this->pageNum)
					$linkPage.=" {$page} ";
				else
					break;
			}

			return $linkPage;
		}

		private function next(){
			if($this->page==$this->pageNum)
				$html.='';
			else
				$html.="  {$this->config["next"]}  ";

			return $html;
		}

		private function last(){
			if($this->page==$this->pageNum)
				$html.='';
			else
				$html.="  {$this->config["last"]}  ";

			return $html;
		}

		private function goPage(){
			return '    ';
		}
		function fpage($display=array(0,1,2,3,4,5,6,7,8)){
			$html[0]="  共有{$this->total}{$this->config["header"]}  ";
			$html[1]="  每页显示".($this->end()-$this->start()+1)."条，本页{$this->start()}-{$this->end()}条  ";
			$html[2]="  {$this->page}/{$this->pageNum}页  ";
			
			$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:

	
	
	
	


	
ajax无刷新分页效果
	

对分页类Pagination.php的修改:

            
		private function first(){
			if($this->page==1){
				$html.='';
                        }
			else{
				// $html.="  {$this->config["first"]}  ";
				$html.="  {$this->config["first"]}  ";
                        }
			return $html;
		}

		private function prev(){
			if($this->page==1){
				$html.='';
                        }
			else{
				// $html.="  {$this->config["prev"]}  ";
				$html.="  {$this->config["prev"]}  ";
                        }
			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.=" {$page} ";
				$linkPage.=" {$page} ";

			}
		
			$linkPage.=" {$this->page} ";
			

			for($i=1; $i<=$inum; $i++){
				$page=$this->page+$i;
				if($page<=$this->pageNum){
					// $linkPage.=" {$page} ";
					$linkPage.=" {$page} ";
				}
				else{
					break;
				}
			}

			return $linkPage;
		}

		private function next(){
			if($this->page==$this->pageNum)
				$html.='';
			else
				// $html.="  {$this->config["next"]}  ";
				$html.="  {$this->config["next"]}  ";

			return $html;
		}

		private function last(){
			if($this->page==$this->pageNum)
				$html.='';
			else
				// $html.="  {$this->config["last"]}  ";
				$html.="  {$this->config["last"]}  ";

			return $html;
		}

		private function goPage(){
			// return '    ';
			return '    ';
		}

无刷新分页效果如下所示：

总结：

1、无刷新主要的工作是把分页类页码列表的超链接变为showpage() js函数的调用：

2、在主访问页面index.html制作一个获得分页信息的函数（ajax去获得分页信息）

另附数据库sql语句，有兴趣的小伙伴可以拿来练练手~

链接: https://pan.baidu.com/s/1Ob6CohStWBGN3M3HysiVeQ 密码: yjsm