广告合作QQ：76874919

ajax无刷新分页效果

Ajax 2020-06-27

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;
      }
   }
效果图：

相关文章

网页的异步请求（Ajax）
JS原生Ajax操作(XMLHttpRequest) GET请求 POST请求 兼容性问题 利用iframe模拟ajax 实现表单提交的返回...
手动实现AJAX
AJAX 每日更新前端基础，如果觉得不错，点个star吧 &#128515; https://github.com/WindrunnerMax/E...
axios异步提交表单数据的不同形式
踩坑Axios提交form表单几种格式 前后端分离的开发前后端, 前端使用的vue,后端的安全模块使用的SpringSe...
php的ajax简单实例
很早就听闻ajax的名声，但是却一直不知道怎么用，今天自己捣鼓了一下，竟然会用了，哈哈哈哈。 为了防止...
Json与Ajax(注册实例）
需要在服务器上进行哈 jquery的ajax方法： // jquery请求 $.ajax({ url: &quot;./server/slider.js...
Ajax基础原理与应用
Ajax函数封装ajax.js // Get / Post // 参数 get post // 是否异步 // 如何处理响应数据 // URL // var...