Bagaimana untuk melaksanakan paging ajax dalam laravel

Laravel melaksanakan paging Ajax

Dengan pembangunan Internet dan kemajuan teknologi, aplikasi web moden mempunyai keperluan yang semakin tinggi untuk pengalaman pengguna. Dalam aplikasi sedemikian, paging adalah ciri yang sangat diperlukan. Dalam kaedah paging tradisional, kaedah penyegaran halaman tradisional digunakan untuk lompatan halaman dan pemuatan data, yang akan membawa kepada pengurangan dalam pengalaman pengguna, terutamanya apabila jumlah data adalah besar, pengguna perlu menunggu lama untuk melihat kandungan yang dikehendaki. Oleh itu, kaedah paging baru digunakan secara meluas - paging Ajax.

Rangka kerja Laravel menyediakan sokongan yang kuat dan membolehkan kami melaksanakan paging Ajax dengan mudah. Artikel ini akan memperkenalkan cara menggunakan Laravel untuk melaksanakan paging Ajax.

1. Konfigurasikan penghalaan

Pertama, kita perlu mengkonfigurasi penghalaan untuk menyokong halaman Ajax. Tambah laluan berikut dalam fail web.php:

Route::get('/posts', 'PostController@index');
Route::get('/posts/fetch_data', 'PostController@fetch_data');

2. Cipta Pengawal

Seterusnya, kita perlu mencipta pengawal untuk mengendalikan permintaan. Jalankan arahan berikut untuk mencipta PostController dalam Laravel:

php artisan make:controller PostController

Tambah kod berikut dalam PostController:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Post;

class PostController extends Controller
{
    public function index()
    {
        $posts = Post::paginate(5);
        return view(&#39;posts.index&#39;, compact(&#39;posts&#39;));
    }

    public function fetch_data(Request $request)
    {
        if($request->ajax()) {
            $posts = Post::paginate(5);
            return view('posts.data', compact('posts'))->render();
        }
    }

}

Kami menggunakan kaedah penomboran untuk mendapatkan data pos. Dalam kaedah fetch_data, kami menggunakan paparan bilah yang dipanggil data untuk memaparkan data seperti berikut:

<div class="row">
    @foreach($posts as $post)
        <div class="col-md-6">
            <div class="card mb-3">
                <img class="card-img-top" src="{{ $post->image }}" alt="{{ $post->title }}">
                <div class="card-body">
                    <h5 class="card-title">{{ $post->title }}</h5>
                    <p class="card-text">{{ $post->excerpt }}</p>
                    <a href="{{ route(&#39;posts.show&#39;, $post) }}" class="btn btn-primary">Read More</a>
                </div>
            </div>
        </div>
    @endforeach
</div>

3. Cipta Paparan

Sekarang, kita perlu membuat paparan untuk memaparkan data siaran dan mendayakan penomboran Ajax. Tambahkan kandungan berikut dalam fail resources/views/posts/index.blade.php:

@extends('layouts.app')

@section('content')
    <div class="container">
        <div id="posts">
            @include('posts.data')
        </div>
        <div class="d-flex justify-content-center">
            {{ $posts->links() }}
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        $(document).ready(function() {
            $(document).on('click', '.pagination a', function(e) {
                e.preventDefault();

                var page = $(this).attr('href').split('page=')[1];
                fetch_data(page);
            });
        });

        function fetch_data(page)
        {
            $.ajax({
                url:"/posts/fetch_data?page="+page,
                success:function(data)
                {
                    $('#posts').html(data);
                }
            });
        }
    </script>
@endsection

Di sini, kami menggunakan arahan @penomboran blade untuk memaparkan pautan nombor halaman dan juga memasukkan data.blade. data php masuk. Dalam arahan @scripts, kami menggunakan jQuery untuk mengendalikan acara klik dan memberikan data.

4. Buat gaya

Akhir sekali, kita perlu menambah beberapa gaya untuk menjadikan halaman kelihatan lebih cantik. Tambahkan kod berikut pada fail awam/css/app.css:

.card {
    border: none;
}

.card-text {
    color: #555;
}

.card-img-top {
    height: 220px;
    object-fit: cover;
}

Kini aplikasi Laravel kami sedia untuk dinomborkan menggunakan Ajax! Apabila pengguna mengklik pada pautan nombor halaman, halaman akan memuatkan data tanpa memuat semula. Ini boleh meningkatkan pengalaman pengguna, terutamanya apabila jumlah data sangat besar.

Ringkasan

Artikel ini memperkenalkan cara menggunakan rangka kerja Laravel untuk melaksanakan paging Ajax. Dengan menggunakan penomboran Ajax, anda boleh meningkatkan pengalaman pengguna dalam aplikasi web anda, terutamanya apabila volum data adalah besar. Menggunakan rangka kerja Laravel, kami boleh melaksanakan fungsi ini dengan mudah dan mengoptimumkan aplikasi kami. Harap artikel ini membantu anda!

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan paging ajax dalam laravel. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!