sjaakp/yii2-loadmore Load More button for Yii 2.0 GridView or ListView

yii2-loadmore

  1. Installation
  2. Using LoadMorePager
  3. Options
  4. Refinement 1: summary
  5. Refinement 2: efficiency
Load More button for Yii2

LoadMorePager, the main part of the yii2-loadmore package, is a widget that can be used as a pager for a GridView or a ListView of the Yii 2.0 PHP Framework. In stead of the usual LinkPager, a 'Load More' button is rendered. Clicking it, adds a bunch of new items to the list. With every click, the list grows until there are no more items to show.

A demonstration of LoadMorePager is here.

Installation

Install yii2-loadmore in the usual way with Composer. Add the following to the require section of your composer.json file:

"sjaakp/yii2-loadmore": "*"

or run:

composer require sjaakp/yii2-loadmore

You can manually install yii2-loadmore by downloading the source in ZIP-format.

Using LoadMorePager

Use LoadMorePager in a GridView just by setting the latter's pager property to a configuration array with the former's class, like:

<?php
    use yii\grid\GridView;
    use sjaakp\loadmore\LoadMorePager;
?>
...
<?= GridView::widget([
    'dataProvider' => ...
    'pager' => [
        'class' => LoadMorePager::class
    ],
    // ...other GridView options, like 'columns'... 
])  ?>
...
    

That's all that's needed for basic functionality. The Load More button will appear as a standard link. In a ListView, set the pager property likewise.

Options

LoadMorePager's options can be set like so:

<?php
    use yii\grid\GridView;
    use sjaakp\loadmore\LoadMorePager;
?>
...
<?= GridView::widget([
    'dataProvider' => ...
    'pager' => [
        'class' => LoadMorePager::class,
        'label' => 'Show more data'
    ], 
    // ...other GridView options, like 'columns'... 
])  ?>
...

LoadMorePager has three options:

label

string The text of the Load More button. Default: 'Load more'.

options

array The HTML options of the Load More button. Set this to something like [ 'class' => 'btn btn-secondary' ] to give the button the looks of a real button (assuming that you use Bootstrap). Default: [] (empty array).

indicator

string Optional. The CSS selector for the indicator element(s). While the list is waiting for new items, the indicator element(s) get the extra CSS class 'show'. Great for showing a 'spinner' after the Load More button is clicked. Default: null.

Refinement 1: summary

In its basic setup, LoadMorePager will not update the GridView's or ListView's summary, if present. To correct that, wrap the {end} token in the list's summary setting with a <span> having the class 'summary-end'. For example:

<?php
    use yii\grid\GridView;
    use sjaakp\loadmore\LoadMorePager;
?>
...
<?= GridView::widget([
    'dataProvider' => ...
    'pager' => [
        'class' => LoadMorePager::class,
        'label' => 'Show more data'
    ], 
    'summary' => 'Showing {begin}-<span class="summary-end">{end}</span> of {totalCount} items',
    // ...other GridView options, like 'columns'... 
])  ?>
...

Refinement 2: efficiency

Clicking the Load More button sends an Ajax call to the server, which sends a complete page back to the browser. Only a small part is actuallly used. This works, but it could be made quite a bit more efficient by taking the following steps.

Put the list in a separate subview

In stead of the usual view file:

<?php
    /* loadmore.php */
    use yii\grid\GridView;
    use sjaakp\loadmore\LoadMorePager;
?>
// other stuff on the page
...
<?= GridView::widget(...) ?>
...
// more other stuff
...

Create two view files, one main view which renders a subview:

<?php
    /* loadmore.php */
?>
// other stuff on the page
...
<?= $this->render('_loadmore.php', [
    'dataProvider' => $dataProvider
]) ?>
...
// more other stuff
...
 

The subview:

<?php
    /* _loadmore.php */
    use yii\grid\GridView;
    use sjaakp\loadmore\LoadMorePager;
?>
// no other stuff!
<?= GridView::widget(...) ?>

Modify the action function in the controller

Change the usual:

public function actionLoadmore()    {
    $dataProvider = ...;

    return $this->render('loadmore', [
        'dataProvider' => $dataProvider,
    ]);
}

into:

public function actionLoadmore()    {
    $dataProvider = ...;

    if (Yii::$app->request->isAjax) {
        return $this->renderAjax('_loadmore', [
            'dataProvider' => $dataProvider,
        ]);
    }

    return $this->render('loadmore', [
        'dataProvider' => $dataProvider,
    ]);
}

This makes the server only render the subview if an Ajax call is made by the Load More button.

How do I change the number of returned items?

Do this by modifying the pagination value of the list's dataProvider, like:

 $dataProvider = new ActiveDataProvider([
     'query' => ... ,
     'pagination' => [
         'pageSize' => 12
     ]
 ]);
0 0
1 follower
41 downloads
Yii Version: 2.0
License: MIT
Category: User Interface
Developed by: Sjaakp
Created on: Apr 30, 2019
Last updated: (not set)
Packagist Profile
Github Repository

Related Extensions