Yii2 custom pagination for gridview

Pagination is the process of dividing a document into discrete pages, either electronic pages or printed pages.In this article we discussed the Yii2 pagination how we used the pagination under yii2 framework.

There are two ways we can use the pagination in Yii2.

• Simple Pagination
• Custom Pagination

Add this function in your controller file.

function actionIndex()
{
    $query = User::find()->where(['status' => 1]);
    $countQuery = clone $query;
    $pages = new Pagination(['totalCount' => $countQuery->count()]);
    $models = $query->offset($pages->offset)
        ->limit($pages->limit)
        ->all();

    return $this->render('index', [
         'models' => $models,
         'pages' => $pages,
    ]);
}

Now come to view part index.php file.

foreach ($models as $model) {
    // display $model here
}
// display pagination
echo LinkPager::widget([
    'pagination' => $pages,
]);

Custom Pagination :

LinkPager is handling the pagination link with properties. Here we customized the link property.

so i have create CustomPagination class in app/components folder and set namespace as app/components.We removed the link and added onclick attribute in every pagination link.

<?php
namespace app\components;

use Yii;
use yii\base\InvalidConfigException;
use yii\helpers\Html;
use yii\base\Widget;
use yii\data\Pagination;

class CustomPagination  extends \yii\widgets\LinkPager
{
    public function init()
    {
        parent::init();
    }

    public function run()
    {
        parent::run();
    }

    protected function renderPageButton($label, $page, $class, $disabled, $active)
    {
        $options = ['class' => $class === '' ? null : $class];
        if ($active) {
            Html::addCssClass($options, $this->activePageCssClass);
        }
        if ($disabled) {
            Html::addCssClass($options, $this->disabledPageCssClass);

            return Html::tag('li', Html::tag('span', $label), $options);
        }
        $linkOptions = $this->linkOptions;
        $linkOptions['data-page'] = $page;
        $linkOptions['onclick']='submit_form('.$page.')';

        return Html::tag('li', Html::a($label, '#pagination', $linkOptions), $options);
    }
}

Now in Controller.php .

public function index(){
    $query = Tablereport::find();
    $countQuery = clone $query;
    
    $pages = new Pagination(['totalCount' => $countQuery->count()]);
    
    $dataProvider = new ActiveDataProvider([
        'query' => $query,
    ]);
     return $this->render('GridView', [
         'dataProvider' => $dataProvider,
         'pages' => $pages,
    ]);
}

GridView.php
Using 'layout' properties, we can remove the basic link pager.

<?php
use yii\helpers\Html;
use yii\grid\GridView;
use app\components\CustomPagination;
?>
<div class="report-index">
    <?= GridView::widget([
        'dataProvider' => $dataProvider,
        //'filterModel' => $searchModel,
         'layout' => "{summary}\n{items}",
        'columns' => [
            ['class' => 'yii\grid\SerialColumn'],
            'id',
            'report_name',
            'report_table',
            'report_query:ntext',
            'created_on',
            // 'created_by',

            ['class' => 'yii\grid\ActionColumn'],
        ],
    ]); ?>

    <div id="custom-pagination">
        <?php
            echo CustomPagination::widget([
                'pagination' => $pages,
            ]);
        ?>
    </div>
</div>