Hello Everyone,
In this blog, we will learn about how to Add Pagination in Custom Collection in Magento 2.
Whenever you have a large number of records at that time we should add pagination. Pagination is usually located at the bottom of the page. It also helps to improve user experience. Without pagination page load time will be increased.
Magento 2 by default provides the pagination for the product page, category page etc.
But if you want to add pagination in a custom collection here is a solution.
Without wasting your time, let us guide you straight away. Follow the easy step given below to Add Pagination in Custom Collection in Magento 2.
STEPS FOR ADD PAGINATION IN CUSTOM COLLECTION IN MAGENTO 2
Step 1: Create Index.php file
app/code/Vendor/Extension/Controller/Index/Index.php
<?php
namespace Vendor\Extension\Controller\Index;
use Magento\Framework\App\Action\Action;
use Magento\Framework\Controller\ResultFactory;
class Index extends \Magento\Framework\App\Action\Action
{
protected $resultPageFactory;
public function __construct(
\Magento\Framework\App\Action\Context $context,
\Magento\Framework\View\Result\PageFactory $resultPageFactory
) {
$this->resultPageFactory = $resultPageFactory;
parent::__construct($context);
}
public function execute()
{
$resultRedirect = $this->resultFactory->create(ResultFactory::TYPE_REDIRECT);
$resultPage = $this->resultPageFactory->create();
$resultPage->getConfig()->getTitle()->set(__('Pagination'));
return $resultPage;
}
}
Step 2: Create Pagination.php file
app/code/Vendor/Extension/Block/Pagination.php
<?php
namespace Vendor\Extension\Block;
use Magento\Framework\View\Element\Template;
class Pagination extends Template
{
protected $BookInfo;
protected $BookInfoCollection;
public function __construct(
Template\Context $context,
\Vendor\Extension\Model\BookInfo $BookInfoFactory, // Add your Model
\Vendor\Extension\Model\ResourceModel\BookInfo\CollectionFactory $BookInfoCollection, // Add your Model
array $data = []
) {
parent::__construct($context, $data);
$this->BookInfoFactory = $BookInfoFactory;
$this->BookInfoCollection = $BookInfoCollection;
}
protected function _prepareLayout()
{
$this->pageConfig->getTitle()->set(__('Pagination'));
parent::_prepareLayout();
$page_size = $this->getPagerCount();
$page_data = $this->getCustomData();
if ($this->getCustomData()) {
$pager = $this->getLayout()->createBlock(
\Magento\Theme\Block\Html\Pager::class,
'custom.pager.name'
)
->setAvailableLimit($page_size)
->setShowPerPage(true)
->setCollection($page_data);
$this->setChild('pager', $pager);
$this->getCustomData()->load();
}
return $this;
}
public function getPagerHtml()
{
return $this->getChildHtml('pager');
}
public function getCustomData()
{
$page = ($this->getRequest()->getParam('p')) ? $this->getRequest()->getParam('p') : 1;
$pageSize = ($this->getRequest()->getParam('limit')) ? $this->getRequest()->getParam('limit') : 5;
$collection = $this->BookInfoFactory->getCollection();
$collection->setPageSize($pageSize);
$collection->setCurPage($page);
return $collection;
}
public function getPagerCount()
{
$minimum_show = 5; // set minimum records
$page_array = [];
$list_data = $this->BookInfoCollection->create();
$list_count = ceil(count($list_data->getData()));
$show_count = $minimum_show + 1;
if (count($list_data->getData()) >= $show_count) {
$list_count = $list_count / $minimum_show;
$page_nu = $total = $minimum_show;
$page_array[$minimum_show] = $minimum_show;
for ($x = 0; $x <= $list_count; $x++) {
$total = $total + $page_nu;
$page_array[$total] = $total;
}
} else {
$page_array[$minimum_show] = $minimum_show;
$minimum_show = $minimum_show + $minimum_show;
$page_array[$minimum_show] = $minimum_show;
}
return $page_array;
}
}
Step 3: Create pagination.phtml file
app/code/Vendor/Extension/view/frontend/templates/pagination.phtml
<?php
$custom_data = $block->getCustomData();
?>
<fieldset class="fieldset">
<?php
if (count($custom_data)) {
?>
<div class="table-wrapper custom-data ">
<table class="data table table-data-items ">
<caption class="table-caption"><?= $block->escapeHtml('Pagination') ?></caption>
<thead>
<tr>
<th scope="col" class="col name"><?= $block->escapeHtml('Book Name') ?></th>
<th scope="col" class="col desc"><?= $block->escapeHtml('Book Description') ?></th>
<th scope="col" class="col author"><?= $block->escapeHtml('Author Name') ?></th>
</tr>
</thead>
<tbody>
<?php foreach ($custom_data as $item): ?>
<tr>
<td data-th="Name" class="col name">
<span><?= $block->escapeHtml($item->getBookName()) ?></span>
</td>
<td data-th="Description" class="col desc">
<span><?= $block->escapeHtml($item->getBookDescription()) ?></span>
</td>
<td data-th="Author" class="col author">
<span><?= $block->escapeHtml($item->getAuthorName()) ?></span>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
<?php if ($block->getPagerHtml()): ?>
<div class="order-products-toolbar toolbar bottom">
<?= $block->getPagerHtml() ?>
</div>
<?php endif ?>
<?php } else { ?>
<div class="message info empty">
<span><?= $block->escapeHtml('You have no data in table.') ?></span>
</div>
<?php } ?>
</fieldset>
Step 4: Create helloworld_index_index.xml file
app/code/Vendor/Extension/view/frontend/layout/helloworld_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="content">
<block class="Vendor\Extension\Block\Pagination" template="Vendor_Extension::pagination.phtml"/>
</referenceContainer>
</body>
</page>
Step 5: Finally run the below commands
$ php bin/magento setup:upgrade
$ php bin/magento cache:clean
$ php bin/magento cache:flush
Step 6: Output:
hit the below url and see the output
http://<yourhostname>/helloworld/index/index
Final Thoughts:
So this was the easiest way which we have told you in this blog. This is how you can Add Pagination in Custom Collection in Magento 2. Hope you liked the blog.
So quickly go to the comment box and tell me how you like this blog?
Stay tuned with us on our site to get new updates of Magento.
Thanks for reading and visiting our site.
