Чтобы реализовать нумерацию страниц кнопки «Загрузить больше» в Laravel, вы можете использовать различные методы. Вот несколько подходов с примерами кода:
Метод 1: AJAX с ответом JSON
-
В вашем контроллере создайте метод для получения данных с разбивкой на страницы:
public function getPaginatedData(Request $request) { $perPage = 10; // Number of items per page $page = $request->input('page', 1); // Current page number $data = YourModel::paginate($perPage, ['*'], 'page', $page); return response()->json($data); } -
Создайте маршрут для обработки запроса AJAX:
Route::get('/get-paginated-data', 'YourController@getPaginatedData')->name('get.paginated.data'); -
В файл представления добавьте структуру HTML и код JavaScript:
<div id="data-container"> <!-- Here goes the paginated data --> </div> <button id="load-more-btn">Load More</button> <script> var page = 1; $('#load-more-btn').on('click', function () { $.ajax({ url: "{{ route('get.paginated.data') }}", data: { page: page }, success: function (response) { var dataContainer = $('#data-container'); dataContainer.append(response.data); if (response.next_page_url) { page++; } else { $('#load-more-btn').hide(); } } }); }); </script>
Метод 2. Отправка формы со скрытым вводом
-
В вашем контроллере создайте метод для получения данных с разбивкой на страницы:
public function getPaginatedData(Request $request) { $perPage = 10; // Number of items per page $page = $request->input('page', 1); // Current page number $data = YourModel::paginate($perPage, ['*'], 'page', $page); return view('your-view', compact('data')); } -
Создайте маршрут для обработки отправки формы:
Route::post('/get-paginated-data', 'YourController@getPaginatedData')->name('get.paginated.data'); -
В файл представления добавьте структуру HTML и код формы:
<div id="data-container"> <!-- Here goes the paginated data --> </div> <form id="load-more-form" action="{{ route('get.paginated.data') }}" method="post"> @csrf <input type="hidden" name="page" value="1"> <button type="submit">Load More</button> </form> <script> var form = document.getElementById('load-more-form'); var pageInput = form.querySelector('input[name="page"]'); form.addEventListener('submit', function (event) { event.preventDefault(); var page = parseInt(pageInput.value) + 1; pageInput.value = page; $.ajax({ url: form.getAttribute('action'), data: $(form).serialize(), success: function (response) { var dataContainer = $('#data-container'); dataContainer.append(response); if (response.next_page_url) { page++; } else { form.style.display = 'none'; } } }); }); </script>