Tiếp theo của series CakePHP này, mình sẽ làm thêm về phần phân trang dữ liệu bằng ajax, đương nhiên tốt nhất là đã xem qua bài [Cakephp] Bài 6 – Phân trang dữ liệu

Chuẩn bị cho phân trang ajax cakephp

Phần cần chuẩn bị thì phải có file thư viện của jquery nhá, chúng ta sẽ đưa nó vào thẻ head trong layout hiện tại, mình làm layout mặc định của cake nên nó sẽ là file app\View\Layouts\default.ctp. Trong thẻ head mình thêm đoạn sao:

<?php echo $this->Html->script(array(
      'jquery.js',
   ));
?>

File jquery.js nằm trong app\webroot\js

Và bây giờ chúng ta sẽ sửa lại các file trong bài hướng dẫn [Cakephp] Bài 6 – Phân trang dữ liệu

Đầu tiên là controller: BooksController.php

  • Khi sử dụng ajax ta cần khai báo thêm components:  public $components = array(‘RequestHandler’);
  • Ta sẽ dùng Js hỗ trợ trong CakePHP để phân trang dữ liệu nó là helper: var $helpers = array(‘Js’,’Paginator’,’Html’);
  • Và trong action danhsach chúng ta không cần sửa gì cả.

Tiếp theo là view: danhsach.ctp

  • Đầu tiên thêm đoạn sau trên phần muốn hiện thị các nút phân trang\
<?php
// Paginator options
$this->Paginator->options(array(
    "update" => "#content",
    "before" => $this->Js->get("#spinner")->effect("fadeIn", array("buffer" => false)),
    "complete" => $this->Js->get("#spinner")->effect("fadeOut", array("buffer" => false)),
    'evalScripts' => true,
    ));
?>

Giải thích một chút về các options trên:

  1. “update” => “#content”: update là khoá bắt buộc không được thay đổi, chúng ta chỉ thay đổi content nó có thể là id hoặc class của html, ý nghĩ của khóa này là nó sẽ thay đổi lại dữ liệu khi phân trang bên trong id hoặc class được chỉ định, ở đây mình sử dụng là #content nó là id chứa nội dung của layout mặc định trong default.ctp.
  2. “before” và “complete” là các sự kiện chúng ta có thể thực hiện trước và sau khi nhấn phân trang, ở đây mình chỉ gọi load một tấm hình khi gọi phân trang và sau khi hoàn thành thì ẩn tấm hình đó đi thông qua $this->Js->get(“#spinner”), và tấm hình này mình để trong view danhsach.ctp

Một điều quan trọng nữa là ở cuối file view mà ta sử dụng phân trang phải có đoạn:

<?php echo $this->Js->writeBuffer();?>

Đến đây là xong phần hiện thị dữ liệu thông qua phân trang bằng ajax trong CakePHP. Các bạn có thể tải ở nút Download phía dưới, và nếu có thắc mắc gì có thể comment bên dưới luôn.

Kết luận

  1. Nếu có thắc mắc gì các bạn để lại comment bên dưới mình sẽ trả lời sớm nhất có thể.
  2. Cảm ơn các bạn đã đọc.

Nongdanit.info
[Cakephp] Bài 21 – Phân trang dữ liệu bằng ajax