Zend_Framework & JQuery ajax phân trang

[Marsu]

Mình viết một ví dụ đơn giản về việc sử dụng Ajax của JQuery cho việc phân trang:

Tạo IndexController.php với nội dung như sau:

Mã: Chọn tất cả

<?php
class IndexController extends Zend_Controller_Action{
   
   public function init(){
      $this->view->headScript()->appendFile('<đường dẫn đến tập tin jquery.js>','text/javascript');
   }

   public function indexAction(){
      echo '<h1>Index action</h1><br>';
      
   }
   
   public  function bookAction(){
      
      $page1 = array(   array('id'=>'1','title'=>'PHP'),
                  array('id'=>'2','title'=>'PHP 5'),
                  array('id'=>'3','title'=>'Zend Framework'),
                 );
      $page2 = array(   array('id'=>'4','title'=>'Javascript'),
                  array('id'=>'5','title'=>'JQuery'),
                  array('id'=>'6','title'=>'Javascript Framework'),
                 );                   
      $page3 = array(   array('id'=>'7','title'=>'HTML'),
                  array('id'=>'8','title'=>'CSS'),
                  array('id'=>'9','title'=>'ASP'),
                 );                
      $book = array('1'=>$page1,
                 '2'=>$page2,
                 '3'=>$page3);
      $page = $this->_request->getParam('page',1);
      $this->view->book = $book[$page];
   
      $this->_helper->layout->disableLayout();
      //$this->_helper->viewRenderer->setNoRender();
   }
}

Chú giải:

Thêm đường dẫn của JQuery vào trang web

$this->view->headScript()->appendFile('<đường dẫn đến tập tin jquery.js>','text/javascript');

Không load layout vào bookAction()

$this->_helper->layout->disableLayout();

Tạo tập tin (VIEW) index.phtml cho indexAction() :

Mã: Chọn tất cả

<?php    
   $linkBook      = $this->baseUrl('/index/book/page');   
?>
<script type="text/javascript">
   $(document).ready(function(  ){
       $("div#book").load("<?php echo  $linkBook . '/1';?>");
   });

   function loadPage(page) {
     $("div#book").load("<?php echo  $linkBook . '/';?>"  + page);
    }      
     
</script>
<div style="margin:  10px;">


<div id="book"></div>

<div>
Phan trang :
<a href="#" onclick="loadPage(1)"> 1 </a> |
<a href="#" onclick="loadPage(2)"> 2 </a> |
<a href="#" onclick="loadPage(3)"> 3 </a> | 
</div>
</div>

Chú giải:
Khi vừa mở trang web sẽ load trang 1 vào

$(document).ready(function( ){
$("div#book").load("<?php echo $linkBook . '/1';?>");
});

Tạo hàm loadPage() với tham số page sau đó gắn vào link để khi nhấn sẽ load bookAction vào indexAction

function loadPage(page) {
$("div#book").load("<?php echo $linkBook . '/';?>" + page);
}

Tạo tập tin (VIEW) book.phtml cho bookAction() :

Mã: Chọn tất cả

<div style="margin: 20px; border: solid 1px red; padding: 5px;">
<?php
   foreach ($this->book as $key => $info){
      echo '<div>' . $info['id'] . ' - ' . $info['title'] . '</div>';
   }
?>
</div>

Để xem kết quả bạn hãy chạy indexAction() rồi nhấn vào các link phân trang của ví dụ trên.

Nghiên cứu thêm Ajax trong JQuery ở đây