Zend_Framework & JQuery ajax phân trang

Để đưa Ajax vào Zend Framework có nhiều cách khác nhau. Trong phần này chúng tôi hướng dẫn các bạn cách sử dụng phương thức load() JQuery Ajax để thực hiện phân trang trong Zend Framework. Từ ví dụ này các bạn có thể phát triển thêm để phù hợp với các ứng dụng của các bạn.

Đầu tiên bạn có thể tạo một cấu hình ứng dụng một module hay hay nhiều module.
Download source
Cấu hình một module: http://www.zend.vn/download/zend-framework/zftutorial.rar
Cấu hình multi module: http://www.zend.vn/download/zend-framework/zf-multi.rar

Đầu tiên chúng ta tạo một IndexController với nội dung sau:

<?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();
       }
    }

Giải thích
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();

Sau đó chúng ta tạo tập tin (VIEW) index.phtml cho indexAction() :

<?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>

Giải thích:
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() :

    <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
Chúc các bạn thành công