How to Add Pagination in Custom Collection of Magento 2

Whenever you have dozens of pages of the website content, listing all the links on a single page makes it clumsy and can cause heavy load times. Pagination divides a single piece of content into various pages which directly affect user experience, development of website and SEO.

It is the most common technique of providing navigation. Pagination is already available in default Magento 2 collections like product collection, search collection etc. But recently when we were working on a project of our client, we required to add pagination in custom collection of Magento 2. In order to fulfill this requirement, we dig deeper and went through many approaches, of which the best is what I’m sharing here.

Step by step guide to add pagination in custom collection of Magento 2:

1. Create Collection for Pager:

   protected $categorycollectionFactory;
    public function __construct(\Magecomp\Blog\Model\ResourceModel\Category\CollectionFactory $categorycollectionFactory) 
       { 
           $this->categorycollectionFactory = $categorycollectionFactory; 
       }
    public function getCategory()
       {
         //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;
           $categorycollection = $this->categorycollectionFactory->create();
           $categorycollection->setPageSize($pageSize);
           $categorycollection->setCurPage($page);
           return $categorycollection;
       }
   

2. Add Collection to Pager and Set Available Limits:
   Below code will add pager to layout and set limit for number of items to be shown on each page. This limit setting is totally depends on your requirements, but I would suggest to keep this limit lower in order to avoid effect of it on page load speed. This limit can be set based on size of content like for image, it should be 5 to 10 and for simple list with content, you can set upto 15. Setting limit for Magento 2 pagination is a bit tricky as the speed of default Magento 2 is really slow.

   protected function _prepareLayout()
    {
        parent::_prepareLayout();
        $this->pageConfig->getTitle()->set(__('Categories'));
        if ($this->getNews()) {
            $pager = $this->getLayout()->createBlock(
               'Magento\Theme\Block\Html\Pager',
               'magecomp.category.pager'
            )->setAvailableLimit(array(5=>5,10=>10,15=>15))->setShowPerPage(true)->setCollection(
               $this->getCategory()
            );
            $this->setChild('pager', $pager);
            $this->getCategory()->load();
        }
        return $this;
    }
   

3. Getting the Child Block of the Pager:
   This function will return block with pagination and limit items to be shown.

   public function getPagerHtml()
   {
       return $this->getChildHtml('pager');
   }
   

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

    

Hope this tutorial has helped you to add pagination in custom collection of Magento 2. Let me know if you require more help or any query regarding this. I would appreciate feedback and suggestions for this blog. Till then, Happy Coding!