How to perform the UI pagination Component in Magento 2

UI Pagination Component is a list/grid secondary component. It is responsible for providing the pagination UI and using the pagination principle to the assortment. This will help to select the number of items to show on a page and choose the page we want to analyze.

Click here and get your world-class customized Magento eCommerce solutions today!!! 

How to perform UI pagination Component in Magento 2?

How to perform UI pagination Component in Magento 2?

  • Please capture a look at the file vendor\magento\module-ui\view\base\ui_component\etc\definition.xml, you will observe these commands:
<paging class="Magento\Ui\Component\Paging">

   <argument name="data" xsi:type="array">

       <item name="config" xsi:type="array">

           <item name="component" xsi:type="string">Magento_Ui/js/grid/paging/paging</item>

           <item name="displayArea" xsi:type="string">bottom</item>

       </item>

   </argument>

</paging>
  • It uses the file js component \vendor\magento\module-ui\view\base\web\js\grid\paging\paging.js and template vendor\magento\module-ui\view\base\web\templates\grid\paging\paging.html
  • You can make use of the UI Pagination Component like this example:
<container name="listing_top">

   <paging name="listing_paging">

       <argument name="data" xsi:type="array">

           <item name="config" xsi:type="array">

               <item name="selectProvider" xsi:type="string">product_listing.product_listing.product_columns.ids</item>

               <item name="storageConfig" xsi:type="array">

                   <item name="provider" xsi:type="string">product_listing.product_listing.listing_top.bookmarks</item>

                   <item name="namespace" xsi:type="string">current.paging</item>

               </item>

           </item>

       </argument>

   </paging>

</container>

We will talk about the element in the details:

  • Select Provider – Component with selected data.
  • storageConfig – storageConfig is a basic component asset. Here is a list of saved page parameters constructed from bookmarks
  • sizesConfig: This is not used in this example. However, you can see it in the file \ seller \ magento \ module-ui \ view \ base \ web \ js \ grid \ paging \ paging.js. It is the component structure of the sizes. By default, it is the file seller \ magento \ module-ui \ view \ base \ web \ js \ grid \ paging \ sizes.js. In this file, you can change the option to display the number of the page’s item

The steps I mentioned above are a simple way to do the UI Pagination component in Magento 2. With this information, the UI Pagination Component can be easily handled. Each store has a UI Pagination Component in Magento 2 with many elements.

How to perform UI pagination Component in Magento 2

Last Update: February 18, 2021  

March 6, 2018   2614   Nandini Ramachandran    Magento, Magento 2 Tutorial, Magento2, Operations    
Total 0 Votes:
0

Tell us how can we improve this post?

+ = Verify Human or Spambot ?

Leave a Reply

Your email address will not be published. Required fields are marked *

Facebook
Twitter
INSTAGRAM
LinkedIn