ajax无刷新分页效果

1、制作传统分页效果


        table {width:700px; border:1px solid black; margin:auto; border-collapse:collapse;}
        td {border:1px solid black; }
    
    
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("");
    printf("",$num);
    printf("",$rst['goods_name']);
    printf("",$rst['goods_price']);
    printf("",$rst['goods_number']);
    printf("",$rst['goods_weight']);
    printf("");
    $temp_i++;
    $num++;
}
printf("",$pageinfo);
echo "
序号名称价格数量重量
%d%s%s%d%d
%s
";
效果图:

ajax无刷新分页效果_第1张图片


2、ajax实现异步分页效果

实现异步部分的php代码:


        table {width:700px; border:1px solid black; margin:auto; border-collapse:collapse;}
        td {border:1px solid black; }
    
    
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("");
    printf("",$num);
    printf("",$rst3['goods_name']);
    printf("",$rst3['goods_price']);
    printf("",$rst3['goods_number']);
    printf("",$rst3['goods_weight']);
    printf("");
    $num++;
}
printf("",$page_list);
echo "
序号名称价格数量重量
%d%s%s%d%d
%s
";

实现异步的html代码:



    
        新建网页
        
        
        

        
        
    
    
        

ajax无刷新分页


分页类:

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

         return $html;
      }

      private function prev(){
            $html = "";
         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.=" {$page} ";

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

         for($i=1; $i<=$inum; $i++){
            $page=$this->page+$i;
            if($page<=$this->pageNum){
               //$linkPage.=" {$page} ";
                    //把a超链接变为是showpage函数(ajax执行)调用
               $linkPage.=" {$page} ";
            }else{
               break;
                }
         }

         return $linkPage;
      }

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

         return $html;
      }

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

         return $html;
      }

      private function goPage(){
         return '    ';
         //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;
      }
   }
效果图:

ajax无刷新分页效果_第2张图片


你可能感兴趣的:(前端-ajax)