ajax无刷新分页效果
发布时间:2020-12-16 03:20:42 所属栏目:百科 来源:网络整理
导读: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
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',$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>",$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" onkeydown="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" onclick="javascript:var page=(this.previousSibling.value>'.$this->pageNum.')?'.$this->pageNum.':this.previousSibling.value;showpage(''.$this->uri.'&page='+page+'')">'; //return '<input type="text" onkeydown="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" onclick="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,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; } }效果图:
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |