Zend Framework và phân trang ajax bằng Jquery

Zend Framework và phân trang ajax bằng Jquery
Người viết: 1551990
Đối tượng: dành cho người mới bắt đầu
Ngày đăng : 07-01-2011

Jquery là một Javascript Framework phổ biến nhất hiện nay và có nhiều ứng dụng rất hữu ích. Hôm nay, mình sẽ hướng dẫn phân trang ajax trong Zend Framework bằng hàm load() của Jquery. Trong bài viết này sẽ áp dụng cho mô hình multiple modules và multiple layouts của thầy Huy dạy.


1. Download Jquery
Đầu tiên, các bạn vào đây để download bản mới nhất của Jquery: http://docs.jquery.com/Downloading_jQueryvà đặt ở folder public/js.
2. Tạo Model
Trong folder Models tạo file User.php với nội dung như sau:

PHP Code:

class Admin_Model_User extends Zend_Db_Table_Abstract{
    protected $_name="user"; //Tên table chứa user
    protected $_primary="id"; //Primary key

    //Lấy tất cả dữ liệu từ table user
    public function listuser(){
        $select = $this->select()->order('id DESC');
        return $this->fetchall($select)->toArray();
    }
}  

Ở đây table chưa user có tên là user với primary key là id. Function listuser() có chức năng lấy tất cả dữ liệu trong table user.
3. Tạo Controller
Trong folder application\modules\admin\controllers tạo file UserController.php với indexAction và listAction:

PHP Code:

class Admin_UserController extends QHO_Controller_Action{
    public function indexAction() {
            $base = $this->_request->getBaseUrl();
            $this->view->base=$base;
            $this->view->headScript()->appendFile($base."/public/js/jquery-1.4.2.min.js",'text/javascript');
    }

    public function listAction(){
        //Lấy danh sách user
        $muser = new Admin_Model_User();
        $data = $muser->listuser();
    
        //Lấy Base URL
        $this->view->base=$this->_request->getBaseUrl();
    
        //Đưa danh sách user vào Zend_Paginator để bắt đầu phân trang
        $paginator = Zend_Paginator::factory($data);
    
        //Số user trên một trang
        $paginator->setItemCountPerPage(5);
    
        //Số trang được hiện ra để click
        $paginator->setPageRange(3);
    
        //Lấy trang hiện tại
        $currentPage = $this->_request->getParam('page',1);
        $paginator->setCurrentPageNumber($currentPage);
    
        //Truyền dữ liệu ra view
        $this->view->data=$paginator;
    
        //Không load layout
        $this->_helper->layout->disableLayout();
    }
}  

4. Tạo view
Trong folder application\modules\admin\views\scripts\ tạo file pagination.phtml để hiển thị đánh số và chuyển trang:

PHP Code:

<div style="margin:0 auto;width:100%;">
<?php
    if (isset($this->previous)){
          echo '<a href="#" onclick="loadPage('.$this->previous.')"> &lt; Previous</a> | ';
    }
    foreach ($this->pagesInRange as $page){
       if ($page != $this->current){
               echo  '<a href="#" onclick="loadPage('.$page.')">' . $page . '</a> | ';
      }else{
          echo $page . ' | ';
      }
   }
     if (isset($this->next)){
        echo '<a href="#" onclick="loadPage('.$this->next.')">Next &gt;</a>';
       }
  ?></div>

Trong folder application\modules\admin\views\scripts\user tạo 2 file index.phtml và list.phtml với nội dung lần lượt như sau:
Index.phtml:

PHP Code:

<div class="list">
     <div id="ulist">
     </div>
        <?php $linkpage = $this->baseUrl()."/admin/user/list/page" ?>      <script type="text/javascript">
       $(document).ready(function(  ){
           $("#ulist").load("<?php echo  $linkpage . '/1';?>");
       });

       function loadPage(page) {
         $("#ulist").load("<?php echo  $linkpage . '/';?>"  + page);
        } 
    
        function check_del(id) {
        if (confirm('Do you want delete this user ?')) location='<?php echo $this->base; ?>/admin/user/delete/id/'+id;
        return false;}
    </script>

</div>

Ở đây, chú ý hàm load() trong javascript, hàm này có chức năng load listAction().
List.phtml

PHP Code:

$stt = 0;
foreach($this->data as $item) {
    $stt++;
    ?>
    <div class='list_item'>
        <div class='item_status'><?php echo $stt; ?></div>
        <div class='item_data'>
            <div class='item_title'><a href='<?php echo $this->base; ?>/admin/user/edit/id/<?php echo $item[id]; ?>' title='Edit this user'><?php echo $item[username]; ?></a></div>
            <?php
                if($item['level'] == 2){
                    echo "<div class='item_info'>Admin</div>";
                }
                else
                {
                    echo "<div class='item_info'>Member</div>";
                }
            ?>        </div>
        <div class='item_actions'>
            <a href='<?php echo $this->base; ?>/admin/user/edit/id/<?php echo $item[id]; ?>' title='Edit this user'><img src='<?php echo $this->base; ?>/application/templates/admin/img/icon_edit.gif' alt='Edit this user' /></a>
            <a href='#' onclick=check_del(<?php echo $item['id']; ?>)' title='Delete this user')><img src='<?php echo $this->base; ?>/application/templates/admin/img/icon_delete.gif' alt='Delete this user' /></a>
        </div>
    </div>
<?php } ?><div  class="pagination">
<?php echo $this->paginationControl($this->data,
                                    'Sliding',
                                    'pagination.phtml'); ?></div>

File này có chức năng hiển thị danh sách user.
Trong file css của template module admin thêm vào CSS sau để hiển thị phần list:

Mã:

/* list item */
.list_item {
border-bottom:1px solid #989DA5;
line-height:14px;
position:relative;
clear: left;
}

.item_status {
border-left:1px solid #FFFFFF;
border-right:1px solid #BBBEC2;
float:left;
height:24px;
margin-right:4px;
padding:4px;
}

.item_actions {
position:absolute;
right:6px;
top:6px;
}

.item_data {
margin:0 75px 0 35px;
}

.item_select {
float:left;
height:32px;
line-height:32px;
padding-right:6px;
}

#rightCol .item_select input {
width: 20px;
margin:9px 0px 0px 0px;
}

.item_title {
color:#555555;
font-weight:bold;
margin-right:80px;
padding-left:6px;
padding-top:2px;
}

.item_info {
color:#989DA5;
font-size:10px;
padding:0 0 1px 6px;
}

.pagination{
line-height: 30px;
border-bottom: 1px solid #989DA5;
border-top:1px solid #989DA5;
text-align: center;
}

.multi_del{
margin: 10px 0px;
text-align: center;
}

Nói thêm về phân trang trong Zend Framework, như chúng ta thấy, chúng ta phải get tất cả dữ liệu cần phân trang ra 1 lần rồi đưa vào Zend_Paginator để phân trang, như thế đối với những dữ liệu ít thì không nói, nhưng đối với dữ liệu lớn thì sẽ có vấn đề ngay.
Đây là lần đầu mình viết tutorial, còn nhiều sai sót, mong thầy và các bạn góp ý 


Dowload source: Ðính Kèm 488
Chúc các bạn thành công.