Lập trình tạo một MVC Component đơn giản cho Joomla. Phần 6. Phân trang

Trong bài viết này

1. Đặt vấn đề
2. Ý tưởng chung
3. Chỉnh sửa view
4. Chỉnh sửa layout

Đặt vấn đề 🔝

Như đã thấy qua các phần trước, giao diện mặc định của component là trang hiển thị danh sách các sinh viên có trong CSDL. Trong CSDL có bao nhiêu sinh viên thì có bấy nhiêu sẽ hiển thị hết ra trên trang này. Rõ ràng là nếu số lượng sinh viên lớn lên thì cách hiển thị như thế là không ổn. Các website hiện nay đều sử dụng kỹ thuật phân trang (pagination) để xử lý việc hiển thị trong tình huống như thế này.

Phần nội dung về phân trang như trên đây bao gồm một hộp chọn để người dùng lựa chọn số phần tử tối đa (limit) được hiển thị trên một trang, thông tin về thứ tự kết quả (Results Counter), thông tin về thứ tự trang (Pages Counter) và một thanh điều hướng (List Footer).

Với sự hỗ trợ của Joomla, việc thêm tính năng phân trang là rất đơn giản. Nhưng trước khi tiếp tục xem phần tiếp theo của bài viết, bạn đọc cần sử dụng tính năng "Thêm sinh viên" đã triển khai ở bước trước để thêm vào CSDL số lượng sinh viên đủ lớn để phân trang.

Ý tưởng chung 🔝

Bản chất của việc phân trang là khi phương thức $model->getItems() được gọi, nó sẽ căn vào giá trị của hai tham số truy vấn là 'list.start' (hiển thị bắt đầu từ phần tử nào) và 'list.limit' (hiển thị tối đa bao nhiêu phần tử) để trả về kết quả tương ứng. Nếu trong truy vấn không có các tham số này thì lời gọi $model->getItems() sẽ trả về tất cả các phần tử.

Trong Joomla có một lớp gọi là JPagination để hỗ trợ triển khai tính năng phân trang. Cụ thể, nó là cơ chế để đưa vào form các tham số nói trên qua một giao diện người dùng thuận tiện.

Nhắc lại rằng chúng ta đã xây dựng model 'students' (lớp StudentsModelStudents) bằng cách thừa kế lớp JModelList. Lớp cha này là lớp có hỗ trợ phân trang. Phương thức getPagination() của nó sẽ trả về đối tượng của lớp JPagination để tạo giao diện phân trang như trên. Nhờ đó, để triển khai tính năng phân trang, ta chỉ cần chỉnh sửa một chút xíu ở view 'students' và layout 'default' của nó.

Chỉnh sửa view 🔝

Ta chỉnh sửa nội dung của file \com_students\views\students\view.html.php bằng cách bổ sung 2 dòng 6 và 10 như sau:

<?php
defined('_JEXEC') or die;
class StudentsViewStudents extends JViewLegacy
{
    protected $items;
    protected $pagination;
    public function display($tpl = null)
    {
        $this->items = $this->get('Items');
        $this->pagination = $this->get('Pagination');
        $this->addToolbar();
        return parent::display($tpl);
    }
    protected function addToolbar()
    {
        JToolbarHelper::title("Danh sách sinh viên");
        JToolbarHelper::addNew("student.add","Thêm một sinh viên");
        JToolbarHelper::deleteList(
            "Bạn có chắc là muốn xóa các sinh viên đã chọn không?",
            "students.delete",
            "Xóa");
    }
}

Tức là ở đây sự bổ sung chỉ là việc chúng ta khai báo thêm thuộc tính $pagination và gọi phương thức getPagination() của model để lấy đối tượng JPagination. Đối tượng này sẽ được sử dụng trong phần layout.

Chỉnh sửa layout 🔝

Ta sửa đổi nội dung của file \com_students\views\students\tmpl\default.php như sau:

<?php
defined('_JEXEC') or die;
?>
<form action="<?php echo JRoute::_('index.php?option=com_students'); ?>" name="adminForm" id="adminForm" method="POST">
    <table class="table table-striped">
        <thead>
            <tr>
                <th><input type="checkbox" onclick="Joomla.checkAll(this)"/></th>
                <th>ID</th>
                <th>Họ và tên</th>
                <th>Năm sinh</th>
                <th>Điểm trung bình</th>
                <th>Hành động</th>
            </tr>
        </thead>
        <tbody>
            <?php foreach ($this->items as $i=>$item)
            {?>
                <?php
                    $urlEdit = JRoute::_('index.php?option=com_students&task=student.edit&id='.$item->id);
                ?>
                <tr class="row<?php echo $i%2;?>">
                    <td><?php echo JHtml::_('grid.id', $i, $item->id); ?></td>
                    <td><?php echo $item->id; ?></td>
                    <td><?php echo '<a href="'.$urlEdit.'">'.$item->name.'</a>';?></td>
                    <td><?php echo $item->year;?></td>
                    <td><?php echo $item->avg;?></td>
                    <td>
                        <a href="<?php echo $urlEdit;?>" title="Chỉnh sửa"><span class="icon-edit"></span></a>
                    </td>
                </tr>
            <?php } ?>
        </tbody>
    </table>
    <div>
        <?php echo $this->pagination->getLimitBox(); ?>
        <?php echo $this->pagination->getResultsCounter();?>
        <span class="icon-screen"></span>
        <?php echo $this->pagination->getPagesCounter(); ?>
        <?php echo $this->pagination->getListFooter(); ?>
    </div>
    <input type="hidden" name="task" value="" />
    <input type="hidden" name="boxchecked" value="0" />
    <?php echo JHtml::_('form.token'); ?>
</form>

Sự sửa đổi ở đây bao gồm:

1. Đưa toàn bộ giao diện vào form
2. Thêm khối mã để hiện thị chức năng phân trang (các dòng từ 36 đến 42)

Phương thức getLimitBox() sẽ in ra hộp chọn với name="limit", việc người dùng lựa chọn một giá trị sẽ dẫn tới việc submit form. Phương thức getListFooter() sẽ in ra thanh điều hướng và bổ sung vào form trường ẩn có name="limitstart"; việc người dùng bấm vào nút trên thanh điều hướng sẽ dẫn đến việc thay đổi giá trị của trường ẩn "limitstart" đồng thời submit form. Vì đặc điểm này, các thành phần trên đây của chức năng phân trang phải được đặt bên trong form. Còn các phương thức getResultsCounter() và getPagesCounter() chỉ in ra các dòng thông tin, vì thế có thể sử dụng hoặc không.

Đến đây, ta đã hoàn tất việc thêm tính năng điều hướng vào trang. Thật đơn giản, phải không?