How to create pagination in Magento 2 using Module?

Question

I am creating a module with custom tab in Magneto 2 front end in which i have listed some product, now i want to create pagination for the same how would i do that.

Controller File :

<?php
namespace Vendor\Extension\Controller\Valuation;

use Magento\Framework\View\Result\PageFactory;
use Magento\Framework\App\Action\Context;

class Index extends \Magento\Framework\App\Action\Action
{
protected $customerSession;
protected $urlInterface;
protected $resultPageFactory;

public function __construct(
    \Magento\Customer\Model\Session $customerSession,
    \Magento\Framework\UrlInterface $urlInterface,
    \Magento\Framework\App\Action\Context $context,
    PageFactory $resultPageFactory
) {
    $this->urlInterface = $urlInterface;
    $this->customerSession = $customerSession;
    $this->resultPageFactory = $resultPageFactory; 
    parent::__construct($context);
}


public function execute()
{
    if(!$this->customerSession->isLoggedIn()) {
        $this->messageManager->addErrorMessage("You must be logged in to view product");
        $this->customerSession->setAfterAuthUrl($this->urlInterface->getCurrentUrl());
        $this->customerSession->authenticate();
        return;
    }
    $this->_view->loadLayout(); 
    $this->_view->renderLayout(); 
    $resultPage = $this->resultPageFactory->create();
    $resultPage->getConfig()->getTitle()->set(__('Custom Pagination'));
    return $resultPage;
}
}

Answer 1

Create Controller File at Vendor\Extension\Controller\Index\Index.php

<?php
namespace Vendor\Extension\Controller\Index;
use Magento\Framework\App\Action\Context;
use Magento\Framework\View\Result\PageFactory;
use Magento\Framework\App\Action\Action;
class Index extends Action
{
    protected $resultPageFactory;
    
    public function __construct(
        Context $context,
        PageFactory $resultPageFactory
    ) {
    
        parent::__construct($context);
        $this->resultPageFactory = $resultPageFactory;
    }
    public function execute()
    {
        $resultPage = $this->resultPageFactory->create();
        $resultPage->getConfig()->getTitle()->set(__('Custom Pagination'));
        return $resultPage;
    }
}

Create block file at Vendor\Extension\Block\Index.php

<?php
namespace Vendor\Extension\Block;
use Magento\Framework\View\Element\Template;
use Magento\Framework\View\Element\Template\Context;
use Vendor\Extension\Model\Extension;
use Magento\Framework\Pricing\Helper\Data as priceHelper;
class Index extends Template
{
    protected $customCollection;
    protected $priceHepler;
    public function __construct(Context $context, Extension $customCollection,priceHelper $priceHepler)
    {
        $this->customCollection = $customCollection;
        $this->priceHepler = $priceHepler;
        parent::__construct($context);
    }
    protected function _prepareLayout()
    {
        parent::_prepareLayout();
        $this->pageConfig->getTitle()->set(__('Custom Pagination'));
        if ($this->getCustomCollection()) {
            $pager = $this->getLayout()->createBlock(
                'Magento\Theme\Block\Html\Pager',
                'custom.history.pager'
            )->setAvailableLimit([5 => 5, 10 => 10, 15 => 15, 20 => 20])
                ->setShowPerPage(true)->setCollection(
                    $this->getCustomCollection()
                );
            $this->setChild('pager', $pager);
            $this->getCustomCollection()->load();
        }
        return $this;
    }
    public function getPagerHtml()
    {
        return $this->getChildHtml('pager');
    }
    public function getCustomCollection()
    {
        $page = ($this->getRequest()->getParam('p')) ? $this->getRequest()->getParam('p') : 1;
        $pageSize = ($this->getRequest()->getParam('limit')) ? $this->getRequest(
            
        )->getParam('limit') : 5;
        $collection = $this->customCollection->getCollection();
        $collection->setPageSize($pageSize);
        $collection->setCurPage($page);
        return $collection;
    }
    public function getFormattedPrice($price)
    {
        return $this->priceHepler->currency(number_format($price, 2), true, false);
    }
}

Create layout file at Vendor\Extension\view\frontend\layout\extension_index_index.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="columns.top">
            <block class="Magento\Theme\Block\Html\Title" name="page.main.title" template="html/title.phtml"/>
            <container name="page.messages" htmlTag="div" htmlClass="page messages">
                <block class="Magento\Framework\View\Element\Template" name="ajax.message.placeholder" template="Magento_Theme::html/messages.phtml"/>
                <block class="Magento\Framework\View\Element\Messages" name="messages" as="messages" template="Magento_Theme::messages.phtml"/>
            </container>
        </referenceContainer>
        <referenceBlock name="page.main.title">
            <action method="setPageTitle">
                <argument translate="true" name="title" xsi:type="string">Custom Pagination</argument>
            </action>
        </referenceBlock>
        <referenceContainer name="content">
            <block class="Vendor\Extension\Block\Index" name="ecustom_pagination" template="Vendor_Extension::index.phtml"  cacheable="false" >
            </block>
        </referenceContainer>
    </body>
</page>

Create template file at Vendor\Extension\view\frontend\templates\index.phtml

<?php if ($block->getPagerHtml()): ?>
    <div class="order-products-toolbar toolbar bottom"><?php echo $block->getPagerHtml(); ?></div>
<?php endif ?>
<?php $gridrecords = $block->getCustomCollection(); ?>
<?php if ($gridrecords && count($gridrecords)): ?>
    <div class="table-wrapper orders-history">
        <table class="data table table-order-items history" id="my-orders-table">
            <caption class="table-caption"><?php echo __('Grid Record') ?></caption>
            <thead>
            <tr>
                <th scope="col" class="col id"><?php echo __('ID') ?></th>
                <th scope="col" class="col title"><?php echo __('Created At') ?></th>
                <th scope="col" class="col product"><?php echo __('Product Name') ?></th>
                <th scope="col" class="col amount"><?php echo __('Price') ?></th>
            </tr>
            </thead>
            <tbody>
            <?php
            foreach ($gridrecords as $gridrecord): ?>
                <tr>
                    <td data-th="<?= $block->escapeHtml(__('ID')) ?>" class="col id">
                        <?php echo $gridrecord->getId() ?>
                    </td>
                    <td data-th="<?= $block->escapeHtml(__('Created At')) ?>"
                        class="col title"><?php echo date('Y-m-d', strtotime($gridrecord->getCreatedDate())); ?></td>
                    <td data-th="<?= $block->escapeHtml(__('Product Name')) ?>" class="col product">
                            <?php echo $gridrecord->getProductName() ?>
                    </td>
                    <td data-th="<?= $block->escapeHtml(__('Price')) ?>"
                        class="col amount"><?php echo $block->getFormattedPrice($gridrecord->getPrice()) ?></td>
                </tr>
            <?php endforeach; ?>
            </tbody>
        </table>
    </div>
    <?php if ($block->getPagerHtml()): ?>
        <div class="order-products-toolbar toolbar bottom"><?php echo $block->getPagerHtml(); ?></div>
    <?php endif ?>
<?php else: ?>
    <div class="message info empty"><span><?php echo __('No any record.'); ?></span></div>
<?php endif ?>

hope this helps