Hướng dẫn phân trang bằng Ajax

Lượt xem:2515
Hướng dẫn phân trang bằng Ajax

Hôm này mình xin hướng dẫn các bạn phân trang bằng Ajax. trong bài hướng dẫn này tôi tôi sẽ tạo một cái class phantrang.class.php kế thừa từ class sanpham.class.php.

Class sanpham.class.php thì mình đã làm ở bài viết Tìm kiếm bằng Ajax rồi các bạn có thể xem lại bài viết nhé .Mình chỉ thêm vào một số nhỏ thôi.

Đầu tiên các bạn tạo các file giống như bố cục ở hình bên dưới. Sao khi các bạn đã tạo xong thì chúng ta bắt đầu copy các đoạn code sao cho đúng từng file nhé.

code file phantrang.class.php ở file này sẽ kế thừa từ file sanpham.class.php nhé

phantrang.class.php

<?php

    //inlcude sanpham.class.php

    include 'sanpham.class.php';

    class Phantrang extends Sanpham{

        //thuoc tinh

        public $start;//vị trí bắt đầu

        public $total;//tổng số sản phẩm

        public $limit=3;//ở đây mình lấy 3 sản phẩm trên 1 trang

        public $next; //button next 

        public $back; //button back

        public $page_current;  //trang hien tai 

        public $page;  //lấy page bên file phantrang.php đưa vào

        public function __construct($page=NULL){

            parent::__construct();

            if($page!=NULL){

                $this->page=$page;

                $this->getPage();//gọi hàm getPage

            }     

        }

        public function getPage(){ 

            if($this->page!=1){

                $this->start=($this->page-1)*$this->limit;

                $this->page_current=$this->page;

            }

            else{

                $this->start=$this->page-1;

                $this->page_current=$this->page;

            }

        }

        public function totalRow(){

            $sql="select * from dienthoai";

            Sanpham::select($sql);

            if(Sanpham::select_count()>0){

                $this->total=ceil(Sanpham::select_count()/$this->limit);

                return $this->total;

            }

        }
        public function select_product(){

            $sql="select * from dienthoai limit $this->start,$this->limit";

            //echo $sql;

             Sanpham::select($sql);

            $count=Sanpham::select_count();

            $str="";

            while($row=Sanpham::fetch_array_table()){

                $str.="<div class=\"sp1\">";

                $str.="<img src=\"public/images/".$row['hinhdt']."\" width=\"196\" height=\"150\">";

                $str.="<h1 style=\"font-size:16px\">".$row['tendt']."</h1>";

                $str.="</div>";

            }

            return $str;

        }

        public function nut_phantrang(){


            $link="<ul class=\"phantrang\">";

            if($this->page_current>1){

                $this->back=$this->page_current-1;

                $link.="<li page='$this->back'>back</li>";

            }


            for($i=1;$i<=$this->totalRow();$i++){

                if($i==$this->page_current){

                    $link.="<li page='$i' class=\"active\">".$i."</li>";

                }

                else{

                    $link.="<li page='$i'>".$i."</li>";

                }

            }

            if($this->page_current<$this->totalRow()){

                $this->next=$this->page_current+1;

                $link.="<li page='$this->next'>next</li>";

            }
            $link.="</ul>"
            return $link;

        }
    }
?>

code trang phantrang.php ở trang này sẽ nhận giá trị trừ ajax gửi qua. mà ajax gửi qua cái gì? khi chúng ta click chuột vào một nút phân trang thì ajax sẽ lấy giá trị số trang đó ví dụ như là:1,2,3... thì sẽ gửi qua bên file phantrang.php để

nó xử lý, sao khi nó xử lý xong sẽ trả về dữ liệu của cái số trang mà ta mới click chuột vào.

code phantrang.php

<?php

    include_once('class/phantrang.class.php');   //include file phantrang.class.php vào nhé
    if(isset($_GET['page'])){
        $page=$_GET['page'];   //lấy giá trị ajax gửi qua
        //echo $page;
        $phantrang = new Phantrang($page);   //tạo đối tượng phân trang
        $dulieu=$phantrang->select_product();    //lấy thông tin sản phẩ
        $link_parination=$phantrang->nut_phantrang();  //lấy các link phân trang
        echo $dulieu.$link_parination;
    }


?>

 

Tiếp theo chúng ta nói về ajax, Các bạn muốn sử dụng ajax thì các bạn phải incluce thư viên của nó vào các bạn có thể lên mạng tại về.

đoạn code xử lý phân trang bằng ajax

$(document).ready(function(){
       function load(){

               phantrang(1);

       }
       function phantrang(page){

                   $('.loading').html("<img src='public/images/loading.gif'/>").fadeIn('fast'); 

                   $.ajax({

                       type:"get",

                       url:"phantrang.php",

                       data:{page:page},

                       success:function(data){

                           $('.loading').fadeOut('fast');

                           $(".allproduct").html(data);

                           //alert(data);

                       }

                   });

       }

       load();
       $("ul.phantrang li").live("click",function(){

          var page=$(this).attr('page');

           phantrang(page);

       //    alert(page);

       });

});

 

trong đoạn code ajax trên đầu tiên chúng ta sẽ load trang mặc định là trang số 1 nên chúng ta gọi hàm load()

type:là kiểu gửi các bạn có thể dùng get,post

url: là link dẫn tới trang xử lý

data: là dữ liệu chúng ta gửi qua với biến là page các bạn có thể đặt tuy ý biến nào cũng được

success:function(data) là dữ liệu trang xử lý gửi dữ liệu đã xử lý xong về cho chúng ta

Đây là toạn bộ code của file sanpham.php

<!DOCTYPE html>
<html>
<head>
    <title>San pham</title>
    <script type="text/javascript" src="public/js/jquery.1.7.2.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
       function load(){

               phantrang(1);

       }
       function phantrang(page){

             $('.loading').html("<img src='public/images/loading.gif'/>").fadeIn('fast'); 

             $.ajax({

                 type:"get",

                 url:"phantrang.php",

                 data:{page:page},

                 success:function(data){

                     $('.loading').fadeOut('fast');

                     $(".allproduct").html(data);

                     //alert(data);

                 }

             });

       }

       load();
       $("ul.phantrang li").live("click",function(){

          var page=$(this).attr('page');

           phantrang(page);

       //    alert(page);

       });
    });

    </script>

    <style type="text/css">

        .wapper{width:650px;margin: 0px auto;}

        div.allproduct{width: 650px; text-align: center;}

        div.allproduct div{float: left;}

        div.loading{width: 650px;text-align: center;position: absolute;}

        div.allproduct div.sp1{width: 200px;border: 1px solid #ccc;height: 210px;padding: 5px 5px;}

        /*link phantrang*/

        ul{width: 650px;float: left;}

        ul li{float: left;width: 50px; height: 50px;padding: 2px;list-style: none;border: 1px solid #ccc;background: #000;color:red;line-height: 50px;}

        ul li.active{background: blue;}

        ul li:hover{cursor: pointer;}

    </style>

</head>
<body>

    <div class="wapper">
            <div class="loading"></div>
            <div class="allproduct">
            </div>
    </div>
</body>
</html>

Chúc các bạn xử lý thành công!


Danh Sách Videos Ngôn Ngữ Lập Trình Danh Sách Tin tức