How to add pagination on Magento2 custom collection?

In our recent project, we had a requirement to add pagination facility to custom module collection. It was displaying customer reward history on "My account" as a new tab "My rewards". Normally Magento provides pagination in default collection like product collection. But here something different. To fulfil the requirement, we have gone through many approaches and found the best solution for pagination on Magento2 custom collection. Here we are going to explain the best approach please follow the steps.

Note: Assuming that You have created a basic module in Magento2. Here Ipragmatech is our package and Ipreward is our module. Please, change your class name accordingly.

Step 1: Create a controller named Myrewad, action Index (Myreward/Index.php)and add the following code to execute method

<?php
namespace Ipragmatech\Ipreward\Controller\Myreward;
class Index extends \Magento\Framework\App\Action\Action
{
   public function execute()
     {
       $this->_view->loadLayout();
       $this->_view->renderLayout();
     }
}

Step 2: Create a block (Assuming that you have already created a model for your table. Here We have custom table and we have created the model as reward) name Reward.php and add the following code. In this code, we have added the pager in our custom collection.

<?php
/**
 * Copyright © 2015 Ipragmatech . All rights reserved.
 * @author Manish Kumar
 * @Date Fri 1 sep
 */
namespace Ipragmatech\Ipreward\Block\Myreward;
use Ipragmatech\Ipreward\Block\BaseBlock;
class Reward extends BaseBlock

{

/**

* @var \Ipragmatech\Ipreward\Model\Reward

*/

protected $_rewardCollection;
/**
 * Reward constructor.
 * @param \Magento\Framework\App\Action\Context $context
 * @param \Ipragmatech\Ipreward\Model\Reward $rewardCollection
 */
public function __construct(
    \Ipragmatech\Ipreward\Block\Context $context,
    \Ipragmatech\Ipreward\Model\Reward $rewardCollection,
){
    $this-&gt;_rewardCollection = $rewardCollection;
    parent::__construct($context);
}

protected function _prepareLayout()
{

    parent::_prepareLayout();
    $this-&gt;pageConfig-&gt;getTitle()-&gt;set(__('My Reward History'));

    if ($this-&gt;getRewardHistory()) {
        $pager = $this-&gt;getLayout()-&gt;createBlock(
            'Magento\Theme\Block\Html\Pager',
            'reward.history.pager'
        )-&gt;setAvailableLimit(array(5=&gt;5,10=&gt;10,15=&gt;15,20=&gt;20))
            -&gt;setShowPerPage(true)-&gt;setCollection(
            $this-&gt;getRewardHistory()
        );
        $this-&gt;setChild('pager', $pager);
        $this-&gt;getRewardHistory()-&gt;load();
    }
    return $this;
}

public function getPagerHtml()
{
    return $this-&gt;getChildHtml('pager');
}
/**
 * function to get rewards point transaction of customer
 *
 * @return reward transaction collection
 */
Public function getRewardHistory()
{
    //get values of current page
    $page=($this-&gt;getRequest()-&gt;getParam('p'))? $this-&gt;getRequest()-&gt;getParam('p') : 1;
    //get values of current limit
    $pageSize=($this-&gt;getRequest()-&gt;getParam('limit'))? $this-&gt;getRequest
    ()-&gt;getParam('limit') : 5;


    $collection = $this-&gt;_rewardCollection-&gt;getCollection();
    $collection-&gt;setPageSize($pageSize);
    $collection-&gt;setCurPage($page);
    $logger-&gt;info("Here reward collection: ".$collection-&gt;getSelect());
    $logger-&gt;info("Here reward collection: Page:".$page." Page size :"
        .$pageSize);
    return $collection;
}

}

Step 3: Added/Modify the following code on layout file app/code/Ipragmatech/Ipreward/view/frontend/layout/ipreward_myreward_index.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="2columns-left" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
    <update handle="customer_account"/>
     <body>
        <referenceContainer name="content">          
         <block class="Ipragmatech\Ipreward\Block\Myreward\Reward" name="myreward_reward" template="myreward/reward.phtml">
         </block>
        </referenceContainer>      
    </body>
</page>

Step 4: Add your phtml file as app/code/Ipragmatech/Ipreward/view/frontend/templates/myreward/reward.phtml and add the following code

phtml-code

and the output will be look like this

reward-history

Sometimes we have faced some CSS issue in which page limit not displayed so use the following CSS if you have the same issue.

.custom-pager .limiter{
    display: block !important;
}

Hope this will help you a lot. Please let us know if you have any issue regarding Magento customization.

Posted from my blog with : https://www.ipragmatech.com/pagination-magento2-custom-collection/

How to add pagination on Magento2 custom collection? | Ecency