Как реализовать кнопку Load More в Laravel?

Question

[driverx18]

В верстке есть

Load

(тостер ссылку делает)
По клике на эту кнопку должны подгружаться по 2 публикации. Никогда с таким не работал, понимаю что тут надо с аяксом что-то делать, а что в самом пхп сделать - не понимаю. Как реализовывается такое?

Answer 1

[Максим Маркитантов]

В контроллере

public function loadMore(Request $request)
    {
        $article= Article::orderBy('id', 'desc')->paginate(2);
        if ($request->ajax()) {
            return $article->toJson();
        }
       abort(404);
}

JS

$.ajax({
            type: 'GET',
            url: '/article?page=' + page,
            success: function (data) {
                let obj = JSON.parse(data);
                createArticleNode(obj);
                if (obj.to === obj.total) {
                    $('.button_more').hide();
                }
            }
        });

И нужно сделать функцию createArticleNode(obj), которая будет создавать dom-елементы

Comments

[driverx18]

Насчет контроллера:
loadMore она должна изначально передавать все данные в вид, или сначала должен быть экшн index, какой выбирает первые пару записей, а при клике на кноку Load more то идет запрос к loadMore? И почему в JSON? Я видел решения с JSON, но так и не понял зачем переводить в него
Спасибо

[Максим Маркитантов]

driverx18: можно сделать вот так контроллер по обычному запросу будем получать первые 2 записи, а по аяксу следующие 2

public function index(Request $request)
    {
        $photos = Photo::orderBy('id', 'desc')->paginate(2);
        if ($request->ajax()) {
            return $photos->toJson();
        } else {
            return view('photogallery.home', ['photos' => $photos->toArray()]);
        }
    }

Почему Json? Это упрощает понимание и в целом нагрузка меньше ( быстрее приходят данные, остается их только обработать клиенту), если у вас структура страницы не сильно громоздкая, то можно возвращать всегда вьюшку return view('photogallery.home', ['photos' => $photos->toArray()]), но и тогда не нужно будет создавать новые DOM а просто добавлять в уже существующий (корневой) DOM результат запроса

[driverx18]

Максим Маркитантов: я уже реализовал это с вашей помощью, хоть и долго реализовывал) спасибо большое
вопрос только, не понимаю почему мы конвертируем в JSON это дело? АJAX только сможет JSON распознать?

[Максим Маркитантов]

driverx18: я обновил пост и если вопрос разрешен, отмечайте ответ как правильным чтоб помочь другим людям в поиске ответа)

[driverx18]

Максим Маркитантов: да, решено, спасибо!
только вопрос один, ко мне приходит в JSON данные user_id. Автора поста в Laravel я во вьшке определяю так: $post->user->name, а как мне определить в JS автора? У меня есть только user_id, вот мой вопрос: Как в JS определить автора по его ID?
Спасибо еще раз большое! Пометил как ответ

[driverx18]

Максим Маркитантов: и в целом так ли создавать надо DOM-элементы?

[Максим Маркитантов]

driverx18: нужно в ответ добавлять информацию о пользователе примерно так

$article= Article::orderBy('id', 'desc')->paginate(2);
$arr = $article->toArray();
$arr['user'] = $post->user->toArray();

DOM элементы в принципе так, но я бы сделал по другому, я приведу пример, он не относится к вашему коду

columnNode = document.createElement('div');
columnNode.classList.add('col-md-4', 'col-sm-4', 'col-xs-4', 'photogallery__column');
let aNode = document.createElement('a');
aNode.classList.add('photogallery__link');
let num = obj.data[3 * i + j]['id'];
aNode.setAttribute('href', '/photogallery/show/' + num);

let imgNode = document.createElement('img');
imgNode.src = '/thumbs/' + obj.data[3 * i + j]['name'];
imgNode.setAttribute('alt', obj.data[3 * i + j]['name']);

aNode.appendChild(imgNode);
columnNode.appendChild(aNode);
rowNode.appendChild(columnNode);

UPD кстати если возвращать как массив в контроллере, то в success аякса не нужно парсить json let obj = JSON.parse(data); - лишнее

[driverx18]

Максим Маркитантов: всё бы ничего, только по скольку posts является массивом, я не могу обратиться к его свойству user

$posts = Post::orderBy('id','desc')->paginate(1);
$arr = $posts->toArray();
$arr['users'] = $posts[0]->user->toArray();

Тут я беру первый элемент, это я так понимаю в экшне мне надо пробивать всё через foreach, и уже там передавать?
UPD

if($request->ajax()) {
               return $arr->toJson();
          }

Не работает =\

[driverx18]

Решил вот так:
контроллер

$posts = Post::orderBy('id','desc')->paginate(1);
          foreach($posts as $post) {
              $posts->user = $post->user->name;
          }
          if($request->ajax()) {
               return $posts->toJson();
          }

В JS получаю:
var name = obj['data'][i]['user']['name'];
Идеально, спасибо!

[Максим Маркитантов]

driverx18: можно везде возвращать ->toArray(), тогда не нужно будет парсить функцией JSON.parse(data) в JS

Answer 2

[Олег]

Если хотите готовое решение или мануал, то гуглите в направлении "ajax pagination".

Comments

[driverx18]

Вот, а то я гуглил Load More button Laravel и никак не мог вдуплить как верно гуглить, спасибо)