Pagination is the process of separating print or digital content into discrete pages. It is an ordinal numbering of pages, which is usually located at the bottom of the site pages. Pagination also refers to the automated process of adding consecutive numbers to identify the sequential order of pages. Some types of website content benefit from being broken into separate pages to make them more user-friendly.
STEP 1
Add a controller file:-
<?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;
}
}
<?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;
}
}Step 2
create ablock file in the extension module block
<?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);
}
}Step 3
Create layout file in the fronted layout page.
<?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>
<?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>Step 4
Now create the template file where user can retrieve data
<?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 && sizeof($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 ?>
<?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 && sizeof($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 ?>Output page will be displayed like:-
Make changes according to custom folder names and custom names.