如何更改Ajax分页页面列表以加载更多内容？

问题描述

如何将视频教程-Making Websites With October CMS - Part 43 - Ajax Pagination中的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>

{％部分“电影/ paginate”％}

<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>

模型Movie.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);
    }
}

解决方法

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

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

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