Morioh
Login
André Schürrle

André Schürrle

11 months ago

So erstellen Sie eine Paginierung mit Ajax in Laravel 10

In diesem Tutorial erfahren Sie, wie Sie mit Ajax in Laravel 10 eine Paginierung erstellen. Dieses Tutorial zeigt Ihnen Schritt für Schritt, wie Sie ein Paginierungssystem erstellen, das Daten dynamisch lädt, ohne die Seite zu aktualisieren.

Um eine Paginierung mit Ajax in Laravel 10 zu erstellen, führen wir die folgenden Schritte aus

  • Schritt 1: Installieren Sie Laravel 10
  • Schritt 2: Datenbank konfigurieren
  • Schritt 3: Route erstellen
  • Schritt 4: Controller erstellen
  • Schritt 5: Blade-Datei erstellen
  • Schritt 6: Führen Sie die Laravel 10-Anwendung aus
     

Schritt 1: Installieren Sie Laravel 10

In diesem Schritt installieren wir Laravel 10 mit dem folgenden Befehl.

composer create-project --prefer-dist laravel/laravel laravel_10_ajax_pagination_example

Schritt 2: Datenbank konfigurieren

Jetzt richten wir die Datenbankkonfiguration für die .env-  Datei ein, wie Datenbankname, Benutzername und Passwort.

DB_CONNECTION=mysql
DB_HOST=localhost
DB_PORT=3306
DB_DATABASE=laravel_10_example
DB_USERNAME=root
DB_PASSWORD=root

Schritt 3: Route erstellen

Dann fügen wir Routen zur  web.php-  Datei hinzu. Fügen Sie dieser Datei also den folgenden Code hinzu.

<?php
  
use Illuminate\Support\Facades\Route;
  
use App\Http\Controllers\PaginationController;
  
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
  
Route::controller(PaginationController::class)->group(function(){
    Route::get('pagination', 'index');
    Route::get('pagination/ajax', 'paginationAjax');
});

Schritt 4: Controller erstellen

In diesem Schritt erstellen wir mit dem folgenden Befehl eine  PaginationController.php-  Datei. Also der folgende Befehl an das Terminal.

php artisan make:controller PaginationController

app/Http/Controllers/PaginationControllers.php

<?php

namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\User;

class PaginationController extends Controller
{
    function index()
    {
        $users = User::paginate(10);
        return view('pagination', compact('users'));
    }

    function paginationAjax(Request $request)
    {
        if($request->ajax())
        {
            $users = User::paginate(10);
            return view('user_pagination_data', compact('users'))->render();
        }
    }
}

?>

Schritt 5: Blade-Datei erstellen

Jetzt erstellen wir eine  pagination.blade.php-  Datei. Fügen Sie dieser Datei also den folgenden HTML-Code hinzu. In dieser Datei fügen wir eine Benutzertabelle hinzu und erstellen einen JQuery-Ajax-Aufruf für die Paginierung.

resources/views/pagination.blade.php

<!DOCTYPE html>
<html>
	<head>
		<title>Laravel 10 Create AJAX Pagination Example</title>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
		<style type="text/css">
			.box{
			    width:600px;
			    margin:0 auto;
			}
		</style>
	</head>
	<body>		
		<div class="container">
			<h3 align="center">Laravel 10 Create AJAX Pagination Example - Websolutionstuff</h3>
			<br />
			<div id="user_table">
				@include('user_pagination_data')
			</div>
		</div>
	</body>
</html>
<script>
	$(document).ready(function(){
	    $(document).on('click', '.pagination a', function(event){
	        event.preventDefault(); 
	        var page = $(this).attr('href').split('page=')[1];
	        fetch_user_data(page);
	    });
	
	    function fetch_user_data(page)
	    {
	        $.ajax({
                url:"/pagination/ajax?page="+page,
                success:function(data)
                {
                    $('#user_table').html(data);
                }
	        });
	    }	 
	});
</script>

resources/views/user_pagination_data.blade.php

<div class="table-responsive">
	<table class="table table-striped table-bordered">
		<tr>
			<th width="10%">ID</th>
			<th width="40%">Name</th>
			<th width="50%">Email</th>
		</tr>
		@foreach($users as $user)
		<tr>
			<td>{{ $user->id }}</td>
			<td>{{ $user->name }}</td>
			<td>{{ $user->email }}</td>
		</tr>
		@endforeach
	</table>
	{!! $users->links() !!}
</div>

Schritt 6: Führen Sie die Laravel 10-Anwendung aus

Jetzt führen wir das Laravel 10-JQuery-Ajax-Paginierungsbeispiel aus, ohne es neu zu laden.

php artisan serve

Viel Spaß beim Codieren!!!

1.05 GEEK