Menu Close
    Hire Us Request Quote Reading List Switch to Dark Mode

    Magento2: Create list with pager in frontend

    Here we create list of record with pager in frontend for  magento2.

    Before starting the code section, let us create the directory structure that we will need for list of record with pager in frontend.

    *Note:- for complete module also include directory structure of blog Create Grid , edit/add grid row and installer in Magento2 .

    app/code/Webkul/Grid/Block
    app/code/Webkul/Grid/Controllers/Index
    app/code/Webkul/Grid/etc/frontend
    app/code/Webkul/Grid/view/frontend
    app/code/Webkul/Grid/view/frontend/layout
    app/code/Webkul/Grid/view/frontend/templates

    as our previous blog Create Grid , edit/add grid row and installer in Magento2 we have already a working Model of table from where we save and retrieve data as record. now here we learn how to display these data in list with pager in frontend .

    Now, as we have the directory structure ready, we will now create file as per module requirement in given sequence:

    1.First, we have to create the block file named Index.php in app/code/Webkul/Grid/Block

    <?php
    namespace Webkul\Grid\Block;
    class Index extends \Magento\Framework\View\Element\Template
    {
         protected $_gridFactory; 
         public function __construct(
            \Magento\Framework\View\Element\Template\Context $context,
            \Webkul\Grid\Model\GridFactory $gridFactory,
            array $data = []
         ) {
            $this->_gridFactory = $gridFactory;
            parent::__construct($context, $data);
            //get collection of data 
            $collection = $this->_gridFactory->create()->getCollection();
            $this->setCollection($collection);
            $this->pageConfig->getTitle()->set(__('My Grid List'));
        }
     
        protected function _prepareLayout()
        {
            parent::_prepareLayout();
            if ($this->getCollection()) {
                // create pager block for collection 
                $pager = $this->getLayout()->createBlock(
                    'Magento\Theme\Block\Html\Pager',
                    'webkul.grid.record.pager'
                )->setCollection(
                    $this->getCollection() // assign collection to pager
                );
                $this->setChild('pager', $pager);// set pager block in layout
            }
            return $this;
        }
     
        /**
         * @return string
         */
        // method for get pager html
        public function getPagerHtml()
        {
            return $this->getChildHtml('pager');
        }   
    }
    ?>

    2. Now, we will create a layout  file for list display  named grid_index_index.xml in app/code/Webkul/Grid/view/frontend/layout

    <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="3columns" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="content">
             <!-- "Webkul\Grid\Block\Index" is block class which one we created in step 1 for retrieve data  -->              
            <block class="Webkul\Grid\Block\Index" name="Grid" template="Webkul_Grid::grid/success.phtml">
            </block>
        </referenceContainer>
    </body>
    </page>
    
    

    In above layout xml file we mention that ‘template=”Webkul_Grid::grid/success.phtml” ‘ that mean Webkul_Grid is module name and grid/success.phtml is path of template file which is in template folder of this module.

    3. Now, we will create a template  file for display list and pager named success.phtml in app/code/Webkul/Grid/view/frontend/template/grid

    /** here you can get block class object by "$this" or "$block"  **/
    /** here i'll use "$block" for get block object **/
    <?php  $_gridrecords = $block->getCollection(); // get collection which we set in block class ?>
    <?php if ($_gridrecords && count($_gridrecords)): ?>
        <div class="table-wrapper orders-history">
            <table class="data table table-order-items history" id="my-orders-table">
                <caption class="table-caption"><?php echo __('Grid Record') ?></caption>
                <thead>
                    <tr>
                        <th scope="col" class="col id"><?php echo __('ID #') ?></th>
                        <th scope="col" class="col title"><?php echo __('Title') ?></th>
                        <th scope="col" class="col date"><?php echo __('Publish Date') ?></th>
                        <th scope="col" class="col status"><?php echo __('Status') ?></th>
                        <th scope="col" class="col ">&nbsp;</th>
                    </tr>
                </thead>
                <tbody>
                    <?php  // read collection as magento1.x and display in list 
                           foreach ($_gridrecords as $_gridrecord): ?>
                        <tr>
                            <td class="col id"><?php echo $_gridrecord->getId() ?></td>
                            <td class="col shipping"><?php echo $_gridrecord->getTitle() ?></td>
                            <td class="col date"><?php echo $block->formatDate($_gridrecord->getPublishDate()) ?></td>
                            <td class="col status"><?php echo $_gridrecord->getIsActive() ?></td>
                        </tr>
                    <?php endforeach; ?>
                </tbody>
            </table>
        </div>
        <?php if ($block->getPagerHtml()): ?>
            <div class="order-products-toolbar toolbar bottom"><?php echo $block->getPagerHtml(); // for display pager block which we create in block file.   ?></div>
        <?php endif ?>
    <?php else: ?>
        <div class="message info empty"><span><?php echo __('grid records not available.'); ?></span></div>
    <?php endif ?>
    
    

    4.Now, we have to create the frontend controller  file.In Magento2, we need to create separate file for each action of frontend under the Controller folder. file named Index.php in app/code/Webkul/Grid/Controller/Index

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

    5. Now, we will create a route configuration file for frontend  named routes.xml in app/code/Webkul/Grid/etc/frontend

    <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../lib/internal/Magento/Framework/App/etc/routes.xsd">
    <router id="standard">
        <route id="grid" frontName="grid">
            <module name="Webkul_Grid" />
        </route>
    </router>
    </config>
    

    6. Now our frontend controller is ready when you open “localhost/magento2/grid” then your controller run and output display as following with list of record and pager.

    here ‘locahost/magento2’ is magento2 base url and grid is controller on which record list display with pager.

    
    

    and now we learned Magento2: Create list with pager in frontend 🙂

    . . .

    Comments (2)

    Add Your Comment

  • Priya Ponnusamy
    Hi, Nice tutorial..
    But I didn’t see the list in frontend, only the text ‘My Grid List ‘ is displaying..
    success.phtml is not triggering
    • HimansuPatel
      Change view folder name ‘template’ to ‘templates’
  • Back to Top
    css.php
    Hire Us!
    Brief us about your requirements and we'll get back to you.
    Woo! Hooy!
    We have just recieved your project brief and our expert will contact you shortly.
    Send Again
    Close