README

为 Yii2 添加 "加载更多" 按钮

LoadMorePager 是 yii2-loadmore 包的主要部分，它是一个可以用于 GridView 或 ListView 的 Yii 2.0 PHP 框架的小部件。与常用的 LinkPager 不同，它会渲染一个 "加载更多" 按钮。点击此按钮，将向列表中添加一些新项目。每次点击，列表都会增长，直到没有更多项目可以显示。

可以在这里查看LoadMorePager的演示。

安装

使用 Composer 以常规方式安装 yii2-loadmore。将以下内容添加到 composer.json 文件的 require 部分

"sjaakp/yii2-loadmore": "*"

或者运行

composer require sjaakp/yii2-loadmore

您可以通过下载 ZIP 格式的源代码手动安装 yii2-loadmore。

使用 LoadMorePager

只需将 LoadMorePager 的类设置为配置数组，即可在 GridView 中使用它，如下所示

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

这已经足够实现基本功能。加载更多按钮将显示为标准链接。在 ListView 中，同样设置 pager 属性。

选项

LoadMorePager 的选项可以设置如下

<?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 有四个选项

label

string 加载更多按钮的文本。默认：'加载更多'。

id

string 加载更多按钮的 HTML ID。如果未设置（默认）则自动生成。

options

array 加载更多按钮的 HTML 选项。设置为例如 [ 'class' => 'btn btn-secondary' ] 以给按钮赋予真实按钮的外观（假设您使用 Bootstrap）。默认：[]（空数组）。

indicator

string 可选。指示元素的 CSS 选择器。当列表等待新项目时，指示元素会获得额外的 CSS 类 'show'。非常适合在点击加载更多按钮后在按钮后面显示 "旋转器"。默认：null。

改进 1：摘要

在其基本设置中，LoadMorePager 不会更新 GridView 或 ListView 的摘要（如果存在）。要纠正这一点，请将列表的 summary 设置中的 {end} 标记包裹在一个具有类 'summary-end' 的 <span> 元素中。例如

<?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'... 
])  ?>
...

改进 2：效率

点击加载更多按钮会向服务器发送 Ajax 请求，服务器会将整个页面发送回浏览器。实际上只有一小部分被实际使用。这可以工作，但通过以下步骤可以使其效率提高很多。

将列表放在单独的子视图中

代替常规视图文件

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

创建两个视图文件，一个主视图用于渲染子视图

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

子视图

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

修改控制器中的操作函数

改变常规

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

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

为

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

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

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

这样设置后，服务器只在按下“加载更多”按钮进行Ajax调用时才渲染子视图。

重要：如果您使用此技术，请务必为GridView或ListView以及LoadMorePager设置一个明确的id，如下所示

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

如何更改返回的项目数量？

通过修改列表的dataProvider中的pagination值来完成，如下

 $dataProvider = new ActiveDataProvider([
     'query' => ... ,
     'pagination' => [
         'pageSize' => 12
     ]
 ]);

sjaakp / yii2-loadmore

维护者

详细信息