Hướng dẫn tạo Pagination trong CakePHP với Bootstrap

Trong CakePHP, bạn có thể dễ dàng tạo phân trang (pagination) cho danh sách dữ liệu. Dưới đây là hướng dẫn áp dụng vào trang danh sách khoản vay với giao diện sử dụng Bootstrap:

Thiết Lập Trong Controller

Trong KhoanVayController, sử dụng PaginatorComponent để lấy danh sách khoản vay và thiết lập số lượng bản ghi hiển thị trên mỗi trang.

namespace App\Controller;

class KhoanVayController extends AppController
{
    public function index()
    {
        // Cấu hình Paginator
        $this->paginate = [
            'limit' => 10, // Số bản ghi mỗi trang
            'order' => [
                'KhoanVay.created' => 'desc', // Sắp xếp theo ngày tạo giảm dần
            ],
        ];

        // Lấy dữ liệu
        $khoanVay = $this->paginate($this->KhoanVay);

        $this->set(compact('khoanVay'));
    }
}

Chỉnh Sửa Lại View

Chỉnh sửa lại file index.php trong thư mục templates/KhoanVay/ và sử dụng PaginatorHelper của CakePHP để tạo giao diện.

Code: templates/KhoanVay/index.php

<!-- Pagination -->
   <div class="d-flex justify-content-between align-items-center">
        <div>
            <?= $this->Paginator->counter(__('Trang {{page}} trên {{pages}}, hiển thị {{current}} bản ghi trong tổng số {{count}}')) ?>
        </div>
        <div>
            <ul class="pagination justify-content-end">
                <?= $this->Paginator->first('<< ' . __('Đầu')) ?>
                <?= $this->Paginator->prev('< ' . __('Trước')) ?>
                <?= $this->Paginator->numbers() ?>
                <?= $this->Paginator->next(__('Tiếp') . ' >') ?>
                <?= $this->Paginator->last(__('Cuối') . ' >>') ?>
            </ul>
        </div>
    </div>

Cấu Hình Bootstrap

1. Tạo File Cấu Hình Template Cho Bootstrap

Trong thư mục config tạo file paginator.php

File cấu hình: config/paginator.php

return [
    'nextActive' => '<li class="page-item"><a class="page-link" rel="next" href="{{url}}">{{text}}</a></li>',
    'nextDisabled' => '<li class="page-item disabled"><a class="page-link" href="#" tabindex="-1" aria-disabled="true">{{text}}</a></li>',
    'prevActive' => '<li class="page-item"><a class="page-link" rel="prev" href="{{url}}">{{text}}</a></li>',
    'prevDisabled' => '<li class="page-item disabled"><a class="page-link" href="#" tabindex="-1" aria-disabled="true">{{text}}</a></li>',
    'number' => '<li class="page-item"><a class="page-link" href="{{url}}">{{text}}</a></li>',
    'current' => '<li class="page-item active" aria-current="page"><a class="page-link" href="#">{{text}}</a></li>',
    'first' => '<li class="page-item"><a class="page-link" href="{{url}}">{{text}}</a></li>',
    'last' => '<li class="page-item"><a class="page-link" href="{{url}}">{{text}}</a></li>',
    'counterRange' => '{{start}} - {{end}} trên {{count}}',
    'counterPages' => '{{page}} / {{pages}}',
];

2. Load cấu hình trong AppView

Load cấu hình templates từ file paginator.php

use Cake\View\View;

class AppView extends View
{
    public function initialize(): void
    {
        $this->loadHelper('Paginator', ['templates' => 'paginator']);
    }
}

Kết quả

• Danh sách khoản vay: Hiển thị các khoản vay dưới dạng bảng với giao diện Bootstrap.
• Phân trang: Hiển thị thanh phân trang với các nút Đầu, Trước, Tiếp, Cuối và số trang.