如何更改 Ajax 分页（页面列表）以加载更多？

Question

如何将视频教程中的 Ajax 分页（页面列表）更改为“加载更多按钮” - 使用 October CMS 制作网站 - 第 43 部分 - Ajax 分页？

你能告诉我该怎么做吗？以下是视频教程中的代码。

页面 movie-filter-ajax.htm

title = "Filter movies"
url = "/ajax-filter"
layout = "default"
is_hidden = 0

==
<?
    use Watchlearn\Movies\Models\Movie;
    use Watchlearn\Movies\Models\Genre;
    function onStart() { 
        $this->prepareVars(); 
        $this->prepareYears();
    }
    function onFilterMovies() { $this->prepareVars(); }
    function prepareVars() {
        $options = post('Filter', []);
        $this['movies'] = Movie::listFrontEnd($options);
        $this['genres'] = Genre::all();
        $this['sortOptions'] = Movie::$allowedSortingOptions;
        $this['pages'] = $this['movies']->lastPage();
        $this['page'] = $this['movies']->currentPage();
    }
    function prepareYears() {
        $movies = Movie::all();
        $years = [];
        foreach($movies as $movie){
            $years[] = $movie->year;
        }
        $years = array_unique($years);
        $this['years'] = $years;
    }
?>
==
<h2 class="ui header" style="margin-top:40px;">Filter Movies</h2>
<div class="ui grid">
<div class="five wide column">
{{ form_ajax('onFilterMovies', { update: { 'movies/movies': '#partialMovies', 'movies/paginate': '#partialPaginate' } }) }}
            <div id="MoviesFilter" class="movies-filter ui form">
                <div class="ui segment vertical">
                    <label>Genres</label>
                    {% for genre in genres %}
                        <div class="field">
                            <div class="ui checkbox">
                                <input type="checkbox" name="Filter[genres][]" value="{{ genre.id }}" />    
                                <label>{{genre.genre_title}}</label>
                            </div>
                        </div>
                    {% endfor %}
                    <div class="field">
                        <label>Year</label>
                        <select class="ui fluid dropdown" name="Filter[year]">
                            <option value="">Select Year</option>
                            {% for year in years|sort %}
                                <option value="{{year}}">{{ year }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="field">
                        <label>Sorting</label>
                        <select class="ui fluid dropdown" name="Filter[sort]">
                            {% for code, option in sortOptions %}
                                <option value="{{code}}">{{ option }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="field" id="partialPaginate">
                        {% partial 'movies/paginate' %}
                    </div>
                </div>
            </div>
        {{ form_close() }}
    </div>
    <div class="eleven wide column">
        <div id="partialMovies">
            {% partial 'movies/movies' %}
        </div>
    </div>
</div>

{% 部分“电影/分页”%}

<label>Page</label>
<select class="ui fluid dropdown" name="Filter[page]">
    {% for i in 1..pages %}
        {%  if i == page %}
            <option value="{{page}}" selected>{{ page }}</option>
        {% else %}
            <option value="{{i}}">{{ i }}</option>
        {% endif %}
    {% endfor %}
</select>

模型电影.php

<?php namespace Watchlearn\Movies\Models;
use Model;
/**
 * Model
 */
class Movie extends Model
{
    use \October\Rain\Database\Traits\Validation;
    /*
     * Validation
     */
    public $rules = [
    ];
    /*
     * Disable timestamps by default.
     * Remove this line if timestamps are defined in the database table.
     */
    public $timestamps = false;
    /**
     * @var string The database table used by the model.
     */
    public $table = 'watchlearn_movies_';
    //protected $jsonable = ['actors'];
    /* Relations */
    public $belongsToMany =[
        'genres' =>[
            'Watchlearn\Movies\Models\Genre',
            'table' => 'watchlearn_movies_movies_genres',
            'order' => 'genre_title'
        ],
        'actors' =>[
            'Watchlearn\Movies\Models\Actor',
            'table' => 'watchlearn_movies_actors_movies',
            'order' => 'name'
        ]
    ];
    public $attachOne = [
        'poster' => 'System\Models\File'
    ];
    public $attachMany = [
        'movie_gallery' => 'System\Models\File'
    ];
    public static $allowedSortingOptions = array (
        'name desc' => 'Name - desc',
        'name asc' => 'Name - asc',
        'year desc' => 'Year - desc',
        'year asc' => 'Year - asc'
    );
    public function scopeListFrontEnd($query, $options = []){
        extract(array_merge([
            'page' => 1,
            'perPage' => 10,
            'sort' => 'created_at desc',
            'genres' => null,
            'year' => ''
        ], $options));
        if(!is_array($sort)){
            $sort = [$sort];
        }
        foreach ($sort as $_sort){
            if(in_array($_sort, array_keys(self::$allowedSortingOptions))){
                $parts = explode(' ', $_sort);
                if(count($parts) < 2){
                    array_push($parts, 'desc');
                }
                list($sortField, $sortDirection) = $parts;
                $query->orderBy($sortField, $sortDirection);
            }
        }
        if($genres !== null) {
            if(!is_array($genres)){
                $genres = [$genres];
            }
            foreach ($genres as $genre){
                $query->whereHas('genres', function($q) use ($genre){
                    $q->where('id', '=', $genre);
                });
            }
        }
        $lastPage = $query->paginate($perPage, $page)->lastPage();
        if($lastPage < $page){
            $page = 1;
        }
        if($year){
            $query->where('year', '=', $year);
        }
        return $query->paginate($perPage, $page);
    }
}

Answer 1

您需要做的是在控制器中创建一个 onLoadMore() ajax 处理程序，并使用要加载的页码（data-request-data={page: page + 1} ）调用该处理程序（data-request=onLoadMore）。

然后，您需要从 onLoadMore() 处理程序返回新的分页数据作为 APPEND 模式下的部分更新。

参考。 https://octobercms.com/docs/ajax/update-partials#appending-prepending