0

I am trying to create a gird with pager in my custom module, but it is showing all products in to one page. For this I have tried below way.

Block/InventoryStatus.php

<?php
namespace Training\LessionOne\Block;


class InventoryStatus extends \Magento\Framework\View\Element\Template
{



    /**
     * @var \Magento\Catalog\Model\ResourceModel\Product\CollectionFactory
     */
    protected $productCollectionFactory;

    /**
     * @var \Magento\Catalog\Model\Product\Attribute\Source\Status
     */
    protected $productStatus;

    /**
     * @var  \Magento\Catalog\Model\Product\Visibility
     */
    protected $productVisibility;

    protected $_productFactory;

    public function __construct(
        \Magento\Framework\View\Element\Template\Context $context,
        \Magento\Catalog\Model\ResourceModel\Product\CollectionFactory $productCollectionFactory,
        \Magento\Catalog\Model\ProductFactory $productFactory,
        \Magento\Catalog\Model\Product\Attribute\Source\Status $productStatus,
        \Magento\Catalog\Model\Product\Visibility $productVisibility,
        array $data = []
    ) {
        $this->productCollectionFactory = $productCollectionFactory;
        $this->_productFactory = $productFactory;
        $this->productStatus = $productStatus;
        $this->productVisibility = $productVisibility;
        parent::__construct($context, $data);

    }

    protected function _prepareLayout()
    {

        parent::_prepareLayout();
        $this->pageConfig->getTitle()->set(__('My Grid List'));

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

    /**
     * @return string
     */
    // method for get pager html
    public function getPagerHtml()
    {
        return $this->getChildHtml('pager');
    }


    Public function getProductCollection()
    {
        $productCollection = $this->_productFactory->create()->getCollection();
        $page = ($this->getRequest()->getParam('p'))? $this->getRequest()->getParam('p') : 1;
        $pageSize = ($this->getRequest()->getParam('limit'))? $this->getRequest()->getParam('limit') : 5;

        $productCollection->setPageSize($pageSize);
        $productCollection->setCurPage($page);
        return $productCollection;
    }

}

Controller/Index/Index.php

<?php
namespace Training\LessionOne\Controller\Index;

class Index extends \Magento\Framework\App\Action\Action
{
    /**
     * @var \Magento\Framework\View\Result\PageFactory
     */
    protected $resultPageFactory;

    /**
     * @param \Magento\Framework\App\Action\Context $context
     * @param \Magento\Framework\View\Result\PageFactory resultPageFactory
     */
    public function __construct(
        \Magento\Framework\App\Action\Context $context,
        \Magento\Framework\View\Result\PageFactory $resultPageFactory
    )
    {
        $this->resultPageFactory = $resultPageFactory;
        parent::__construct($context);
    }

    /**
     * Default customer account page
     *
     * @return void
     */
    public function execute()
    {

        $this->_view->loadLayout();
        $this->_view->renderLayout();
        //return $this->resultPageFactory->create();
    }
}

view/frontend/layout/inventorystatus_index_index.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="content">
            <block class="Training\LessionOne\Block\InventoryStatus" name="inventorystatus" template="Training_LessionOne::InventoryStatus.phtml" />
        </referenceContainer>
    </body>
</page>

view/frontend/layout/templates/InventoryStatus.phtml

<?php /** @var $block Training\LessionOne\Block\InventoryStatus */?>

<?php $list = $block->getProducts(); ?>

<?php    $objectManager = \Magento\Framework\App\ObjectManager::getInstance();    ?>

<?php if ($list && count($list)): ?>
<?php if ($block->getPagerHtml()): ?>
    <div class="order-products-toolbar toolbar bottom"><?php echo $block->getPagerHtml(); ?></div>
<?php endif ?>
<div class="table-wrapper orders-history">
    <table class="data table table-order-items history" id="my-orders-table">
        <caption class="table-caption"><?php /* @escapeNotVerified */ echo __('Inventory Status') ?></caption>
        <thead style="background-color: #89d9e8;">
        <tr>
            <th scope="col" class="col id"><?php /* @escapeNotVerified */ echo __('On') ?></th>
            <th scope="col" class="col Pre Order"><?php /* @escapeNotVerified */ echo __('Pre Order') ?></th>
            <th scope="col" class="col Product SKU"><?php /* @escapeNotVerified */ echo __('Product SKU') ?></th>
            <th scope="col" class="col Product Name"><?php /* @escapeNotVerified */ echo __('Product Name') ?></th>
            <th scope="col" class="col Date"><?php /* @escapeNotVerified */ echo __('Date') ?></th>
        </tr>
        </thead>
        <tbody>
        <?php if(count($list) > 0 ){ ?>
            <?php foreach($list as $items){ ?>
                <?php  $product_obj = $objectManager->create('Magento\Catalog\Model\Product')->load($items->getId()); ?>
                <?php  $sku = $product_obj->getSKU(); ?>
                <?php  $url = $block->getBaseUrl() . $sku; ?>
                <tr>
                    <td data-th="<?php echo $block->escapeHtml(__('On')) ?>" class="col id">
                        <?php echo "<input id='on_sku_$sku'" . " type='checkbox' name='on_sku_$sku'" . " checked='checked' disabled='disabled'>"; ?>
                    </td>
                    <td data-th="<?php echo $block->escapeHtml(__('Pre Order')) ?>" class="col date">
                        <?php echo "<input id='pre_sku_$sku'" . " type='checkbox' name='pre_sku_$sku'" . " disabled='disabled'>"; ?>
                    </td>
                    <td data-th="<?php echo $block->escapeHtml(__('Product SKU')) ?>" class="col shipping">
                        <?php

                        $image = "" ;
                        $image .= "<a href='$url' target='_blank'>";
                        $image .= $sku;
                        $image .= "</a>";

                        echo $image;
                        ?>
                    </td>
                    <td data-th="<?php echo $block->escapeHtml(__('Product Name')) ?>" class="col total">
                        <?php echo $product_obj->getName(); ?>
                    </td>
                    <td data-th="<?php echo $block->escapeHtml(__('Date')) ?>" class="col status">
                        <?php echo $product_obj->getCreatedAt(); ?>
                    </td>
                </tr>
            <?php } ?>
        <?php }else{ ?>
            <tr>
                <td colspan="5" data-th="<?php echo $block->escapeHtml(__('No Records')) ?>" class="col id">
                    <?php echo "No Records Found!" ?>
                </td>
            </tr>
        <?php } ?>
        </tbody>
    </table>
</div>
<?php if ($block->getPagerHtml()): ?>
    <div class="order-products-toolbar toolbar bottom"><?php echo $block->getPagerHtml(); ?></div>
<?php endif ?>
<?php else: ?>
    <div class="message info empty"><span><?php /* @escapeNotVerified */ echo __('You have no products.'); ?></span></div>
<?php endif ?>

<style type="text/css">
    .custom-pager .limiter{
        display: block !important;
    }
</style>

see below picture all products are in to one page.

enter image description here

Any help on this?

0
2

You have to change below in your prepareLayout function,

You had just missed setLimit() function for pager,

$pager->setLimit(5)->setShowPerPage(true);

   protected function _prepareLayout()
    {

        parent::_prepareLayout();
        $this->pageConfig->getTitle()->set(__('My Grid List'));

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

Remove var/generation folder and clear cache.

4
  • Yes, now working fine. But pager is not showing properly. any help on this? after I will accept this answer.
    – Bojjaiah
    Mar 9 '17 at 10:29
  • what's the issue in pager, please let me know Mar 9 '17 at 10:33
  • after 5th pager not showing UI correctly. see updated my post.
    – Bojjaiah
    Mar 9 '17 at 10:34
  • 1
    You can check from frontend side, I am not sure but might be Possibility from frontend side. Mar 9 '17 at 10:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.