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

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


    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

    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

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

    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 received your message and our expert will get back to you shortly.
    Send Again
    Close