How To Add Pagination to Custom Collection in Magento 2?

Before we discuss Magento 2 pagination settings, let’s first understand the term itself.

What is Pagination in Magento 2?

It is a content management technique without which, your store’s structure would be incomprehensible, thereby leading to a poor user experience. But what exactly is pagination? The simplest way to describe is it that it is a technique which divides the website content into separate pages. Suppose you have 100 products on offer. Would you show them all at once to a user?

The answer is no. Instead, you may only show 10 or 20 products at once unless the user themselves select a higher limit. The rest of the products are on separate pages. Let’s explain this concept with the help of an example. We are going to search for ‘SSD’ on Amazon UK. The below image shows the search results.

As you can see from the above image, there are over 1,000 results for ‘SSD’. If Amazon decided to show all 1000+ results, imagine the loading time and the data it will consume? To avoid low loading times and consuming the user’s data, Amazon displays only a select few products. The rest can be viewed by clicking on the next pages as shown below.

This is pagination which is already present on Magento 2 default collections. However, in the case of custom collection in Magento 2 such as image galleries, product collection, etc. pagination has to be added. In the following tutorial, we are going to show you everything there is to know about Magento 2 add pagination to custom collection.

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 FME Extensions that are not only limited to setting up a website, as our services extends to consultancy, installation, and customisation to your business needs.

Magento 2 Add Pagination to Custom Collection

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 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 set 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 ?>

Final Thoughts on Magento 2 Add Pagination to Custom Collection

This concludes our article on Magento 2 pagination settings for custom collection. If you have any queries, don’t hesitate to contact us.

Other Articles You Should Read:

• How To Upload Product Image Placeholders in Magento 2?
• How To Get Order Information by Order ID in Magento 2?
• How to Add, Rename & Remove Product Tabs in Magento 2?