Thursday, 25 January 2018

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

gridview,gridview pagination,pagination yii2,grid view custom search,pagination in yii2,sorting in gridview,pagination,yii2 gridview,footer in gridview in yii2,create custom widget in yii2,table pagination,yii2 custom widget,header in gridview in yii2,yii2 gridview filter,how to create custom widget in yii2,custom form,yii2 custom models,listview и gridview,php for beginners,yii2 php custom widget,pegination,yii custom widget,magento paginator,yii2 tutorials for beginners,custom rules yii

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>

Featured post

How to create dynamic schema in mongodb

Sometime what we need in our application is to create mongodb schema for collection and some of our collection schema are same but names are...

Popular Posts