How to paginate table data

When dealing with large datasets, it’s essential to paginate the table data for better performance and usability. Pagination in Table Generator is handled at the adapter level, not through middleware. This ensures that only the required data for the current page is processed and rendered.

The pagination system relies on the Easy Paginator library by Ucscode, which provides built-in support for structured and customizable pagination.


Using Pagination

Let's assume you are using a MySQL adapter, pagination can be enabled by passing a Paginator instance to it.

use Ucscode\Paginator\Paginator;
use Ucscode\HtmlComponent\TableGenerator\Adapter\MysqlResultAdapter;
use Ucscode\HtmlComponent\TableGenerator\TableGenerator;

// Set pagination parameters
$itemsPerPage = 10;
$currentPage = $_GET['page'] ?? 1;
$urlPattern = '/users?page=' . Paginator::NUM_PLACEHOLDER;

// Create a paginator instance
$paginator = new Paginator(null, $itemsPerPage, $currentPage, $urlPattern);

// Fetch database results
$result = $mysqli->query("SELECT * FROM users");

// Create an adapter with pagination
$adapter = new MysqlResultAdapter($result, $paginator);

// Create the table generator
$tableGenerator = new TableGenerator($adapter);

// Render the paginated table
echo $tableGenerator->render();

// Render the pagination links
echo $tableGenerator->getPaginator()->getBuilder()->render();

This will render a paginated table with Bootstrap 5-style pagination controls.


It is highly recommended to handle pagination at the database level and use the Paginator as a standalone instance. This approach prevents excessive memory usage and performance degradation, which can occur when loading thousands of records into the adapter at once. By retrieving only the necessary subset of data per request, you ensure better efficiency and scalability, especially when dealing with large datasets.


Customizing Pagination Output

The paginator's Builder::render() method renders output that is designed in the likeness of Bootstrap Pagination.

If you need full control over the pagination layout, you can iterate through the paginator items and generate custom pagination controls.

foreach ($paginator->getItems() as $item) {
    // Create your paginator element
    $a = new ElementNode('a', [
        'href' => $item->getUrl(),
        'class' => $item->isActive() ? 'active' : null
    ]);

    // Add the innerHTML (or append a NodeInterface if applicable)
    $a->setInnerHtml($item->getContent());

    echo $a->render(); 
}

This allows you to create a pagination UI that matches your design requirements.

A more professional approach would be to create a custom pagination builder by extending the ...\Pagination\Builder class and override the createElement() method


Key Points

  • Pagination is handled at the adapter level.
  • EasyPaginator is used to manage page navigation.
  • The pagination builder provides a Bootstrap 5-style UI by default.
  • Custom pagination can be implemented by iterating through paginator items.

For more details on the paginator, refer to the EasyPaginator library: https://github.com/ucscode/easy-paginator

Source Code
If you find this project useful, consider leaving a on GitHub! Thank you!