We will see how to add pagination for our custom collection in this post. In our previous post, we saw how to display data at frontend. We saw how to display data in the list page and view page. In the list page, what if you have many records like maybe 100 or more. It’s good to show data using pagination and we did not use that. So in this post, we are going to see how to add pagination in the list page.
Pagination For Custom Collection In Magento 2
I am using the same module which we have created before. It is Vky_Test. You may want to check this for it. click here
To add pagination we have to make some changes in a Block TestListData.php and listdata.phtml file.
Why changes in TestListData.php and listdata.phtml? Because of the layout file test_index_listdata.xml of the list page.
File Vky/Test/view/frontend/layout/test_index_listdata.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceContainer name="content">
<block class="Vky\Test\Block\TestListData" name="test.listdata" template="Vky_Test::listdata.phtml">
</block>
</referenceContainer>
</body>
</page>
You can see we are using class="Vky\Test\Block\TestListData" and template="Vky_Test::listdata.phtml"
That’s why we need to make changes in both files.
Right now our TestListData.php file is like below.Vky/Test/Block/TestListData.php
<?php
namespace Vky\Test\Block;
use Magento\Framework\View\Element\Template\Context;
use Vky\Test\Model\TestFactory;
/**
* Test List block
*/
class TestListData extends \Magento\Framework\View\Element\Template
{
public function __construct(
Context $context,
TestFactory $test
) {
$this->_test = $test;
parent::__construct($context);
}
public function _prepareLayout()
{
$this->pageConfig->getTitle()->set(__('Simple Custom Module List Page'));
return parent::_prepareLayout();
}
public function getTestCollection()
{
$test = $this->_test->create();
$collection = $test->getCollection();
return $collection;
}
}
After changing our file should be like below Vky/Test/Block/TestListData.php
<?php
namespace Vky\Test\Block;
use Magento\Framework\View\Element\Template\Context;
use Vky\Test\Model\TestFactory;
/**
* Test List block
*/
class TestListData extends \Magento\Framework\View\Element\Template
{
public function __construct(
Context $context,
TestFactory $test
) {
$this->_test = $test;
parent::__construct($context);
}
public function _prepareLayout()
{
$this->pageConfig->getTitle()->set(__('Simple Custom Module List Page'));
if ($this->getTestCollection()) {
$pager = $this->getLayout()->createBlock(
'Magento\Theme\Block\Html\Pager',
'vky.test.pager'
)->setAvailableLimit(array(5=>5,10=>10,15=>15))->setShowPerPage(true)->setCollection(
$this->getTestCollection()
);
$this->setChild('pager', $pager);
$this->getTestCollection()->load();
}
return parent::_prepareLayout();
}
public function getTestCollection()
{
$page = ($this->getRequest()->getParam('p'))? $this->getRequest()->getParam('p') : 1;
$pageSize = ($this->getRequest()->getParam('limit'))? $this->getRequest()->getParam('limit') : 5;
$test = $this->_test->create();
$collection = $test->getCollection();
//$collection->addFieldToFilter('title','Test Title 01'); // if you want to use filter
//$collection->setOrder('test_id','ASC'); // if you want to set collection order
$collection->setPageSize($pageSize);
$collection->setCurPage($page);
return $collection;
}
public function getPagerHtml()
{
return $this->getChildHtml('pager');
}
}
Now we just need to add below code in listdata.phtml
<?php if ($block->getPagerHtml()): ?>
<div class="order-products-toolbar toolbar bottom"><?php echo $block->getPagerHtml(); ?></div>
<?php endif ?>
So our edited listdata.phtml Vky/Test/view/frontend/templates/listdata.phtml
<?php
$collection = $this->getTestCollection();
?>
<?php if ($block->getPagerHtml()): ?>
<div class="order-products-toolbar toolbar bottom"><?php echo $block->getPagerHtml(); ?></div>
<?php endif ?>
<table class="data table" id="test-data-table">
<caption class="table-caption">Vky Test Data</caption>
<thead>
<tr>
<th scope="col" class="col title">Title</th>
<th scope="col" class="col author">Author</th>
<th scope="col" class="col content">Content</th>
<th scope="col" class="col created_at">Created At</th>
<th scope="col" class="col actions">Action</th>
</tr>
</thead>
<tbody>
<?php foreach ($collection as $key => $data): ?>
<tr>
<td data-th="Title" class="col title"><?php echo $data->getTitle(); ?></td>
<td data-th="Author" class="col author"><?php echo $data->getAuthor(); ?></td>
<td data-th="Content" class="col content"><?php echo $data->getContent(); ?></td>
<td data-th="Date" class="col created_at"><?php echo $data->getCreatedAt(); ?></td>
<td data-th="Actions" class="col actions">
<a href="<?php echo $block->getBaseUrl().'test/index/view/id/'.$data->getTestId(); ?>" class="action view">
<span>View</span>
</a>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
<?php if ($block->getPagerHtml()): ?>
<div class="order-products-toolbar toolbar bottom"><?php echo $block->getPagerHtml(); ?></div>
<?php endif ?>
It’s Done. Flush the cache and check you should have the pagination toolbar at your page.
Next: Magento 2 custom module image upload
(Check the post)
No Comments