How To Add Pagination to Custom Collection in Magento 2?

How To Add Pagination to Custom Collection in Magento 2?

Pagination is already present on Magento 2 default collections. However, incase of custom collection in Magento 2 such as image galleries, product collection, etc. pagination has to be added. In the following tutorial we have shown how you can add Magento 2 pagination to your custom collections through a simple step by step guide. Although there are multiple approaches to achieve this, we have shown the most effective and easy method for pagination of your Magento 2 custom collection.

You can also seek assistance about Magento web development from FMEextensions that are not only limited to setting up a website, as our services extends to consultancy, installation, and customization to your business needs.

Step 1: Create Collection for Pager

   protected $newscollectionFactory;
public function __construct(\FME\News\Model\ResourceModel\News\CollectionFactory $newscollectionFactory) 
    { 

        $this->newscollectionFactory = $newscollectionFactory; 

    }
public function getNews()
    {
      //get values of current page. if not the param value then it will set to 1
        $page=($this->getRequest()->getParam('p'))? $this->getRequest()->getParam('p') : 1;
    //get values of current limit. if not the param value then it will set to 1
        $pageSize=($this->getRequest()->getParam('limit'))? $this->getRequest()->getParam('limit') : 1;


        $newsCollection = $this->newscollectionFactory->create();
        $newsCollection->setPageSize($pageSize);
        $newsCollection->setCurPage($page);
        return $newsCollection;
    }

Step 2: Add Collection to Pager and Set Available Limits

The following will add pager to layout and set limit for number of items to be displayed on each page.  You can set this limit depending on your requirements, but we would recommend you to keep the limit lower so that it does not affect the page loading speed. The limit highly depends on the content size, if you are loading image collection you may need to keep it 5 to10 and for loading a simple list you can set it 10-15. The Magento 2 pagination limit is a tricky task as currently Magento2 itself is pretty slow.
protected function _prepareLayout()
{
    parent::_prepareLayout();
    $this->pageConfig->getTitle()->set(__('News'));


    if ($this->getNews()) {
        $pager = $this->getLayout()->createBlock(
            'Magento\Theme\Block\Html\Pager',
            'fme.news.pager'
        )->setAvailableLimit(array(5=>5,10=>10,15=>15))->setShowPerPage(true)->setCollection(
            $this->getNews()
        );
        $this->setChild('pager', $pager);
        $this->getNews()->load();
    }
    return $this;
}

Step 3: Getting the Child Block of the Pager

This function will return block with pagination and limit items to be displayed.
public function getPagerHtml()
{
    return $this->getChildHtml('pager');
}

Step 4:  Add the following Code in phtml File to Call the Pager

<?php if ($block->getPagerHtml()): ?>
    <div class="order-products-toolbar toolbar bottom"><?php echo $block->getPagerHtml(); ?></div>
<?php endif ?>