Fixing jasongrimes/paginator Compatibility with Bootstrap 4 in Webman

webman paginatorbootstrap 4 compatibilityjasongrimes/paginatorphp pagination fixmobile responsive pagination
Published·Modified·

Webman is a high-performance HTTP service framework built on Workerman. It is designed to replace the traditional PHP-FPM architecture, providing ultra-high performance and scalable HTTP services. You can use Webman to develop websites, HTTP APIs, or microservices.

76b11b5e7fd82ef5.png

Using jasongrimes/paginator Pagination Component in Webman

Webman's pagination relies on the following two PHP components:

  • illuminate/pagination
  • jasongrimes/paginator:~1.0

The official Webman documentation provides detailed usage instructions: https://www.workerman.net/doc/webman/db/paginator.html. However, the pagination method in the official documentation is only compatible with Bootstrap 3 and has compatibility issues under Bootstrap 4.

Resolving Compatibility Issues Between jasongrimes/paginator and Bootstrap 4

The jasongrimes/paginator PHP component is no longer maintained by its author, which means it lacks compatibility with Bootstrap 4, causing pagination style issues.

The solution is to modify the vendor/jasongrimes/paginator/src/JasonGrimes/Paginator.php file. Locate the toHtml() function and update it as follows:

/**
     * Render an HTML pagination control.
     *
     * @return string
     */
    public function toHtml()
    {
        if ($this->numPages <= 1) {
            return '';
        }

        $html = '<ul class="pagination">';
        if ($this->getPrevUrl()) {
            $html .= '<li class="page-item"><a class="page-link" href="' . htmlspecialchars($this->getPrevUrl()) . '">&laquo; '. $this->previousText .'</a></li>';
        }

        foreach ($this->getPages() as $page) {
            if ($page['url']) {
                $html .= '<li' . ($page['isCurrent'] ? ' class="active page-item"' : '') . '><a class="page-link" href="' . htmlspecialchars($page['url']) . '">' . htmlspecialchars($page['num']) . '</a></li>';
            } else {
                $html .= '<li class="disabled page-item"><span class="page-link">' . htmlspecialchars($page['num']) . '</span></li>';
            }
        }

        if ($this->getNextUrl()) {
            $html .= '<li class="page-item"><a class="page-link" href="' . htmlspecialchars($this->getNextUrl()) . '">'. $this->nextText .' &raquo;</a></li>';
        }
        $html .= '</ul>';

        return $html;
    }

After making this modification, the pagination styles will display correctly, as shown below.

3793d80d353f7fc3.png

Limiting Pagination Display Quantity in jasongrimes/paginator

On mobile devices, due to limited screen width, you may find that the jasongrimes/paginator component extends beyond the screen width. You can resolve this by calling the following function:

$paginator->setMaxPagesToShow(3);

This article references content from: https://github.com/jasongrimes/php-paginator/issues/17