LaravelでAjaxページングを実装する方法-Laravel-php.cn

LaravelでAjaxページングを実装する方法

PHPz

リリース： 2023-04-23 09:57:34

オリジナル

722 人が閲覧しました

Laravel は Ajax ページングを実装します

インターネットの発展とテクノロジーの進歩に伴い、最新の Web アプリケーションのユーザーエクスペリエンスに対する要求はますます高くなっています。このようなアプリケーションでは、ページングは不可欠な機能です。従来のページング方式では、ページジャンプやデータロードに従来のページ更新方式が使用されるため、ユーザーエクスペリエンスの低下につながり、特にデータ量が多い場合には、ページを表示するまでに長時間待たなければなりません。希望の内容。したがって、新しいページング方法である Ajax ページングが広く使用されています。

Laravel フレームワークは強力なサポートを提供し、Ajax ページングを簡単に実装できるようにします。この記事では、Laravelを使用してAjaxページングを実装する方法を紹介します。

ルーティングの構成

まず、Ajax ページングをサポートするようにルーティングを構成する必要があります。次のルートを web.php ファイルに追加します。

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

ログイン後にコピー

コントローラーの作成

次に、リクエストを処理するコントローラーを作成する必要があります。次のコマンドを実行して、Laravel で PostController を作成します。

php artisan make:controller PostController

ログイン後にコピー

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();
        }
    }

}

ログイン後にコピー

paginate メソッドを使用して投稿データを取得します。 fetch_data メソッドでは、以下に示すように、data という名前のブレードビューを使用してデータをレンダリングします。

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

ログイン後にコピー

Create View

次に、ビューを作成する必要があります。投稿データを表示し、Ajax ページネーションを有効にします。次のコンテンツを resource/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

ログイン後にコピー

ここでは、blade の @pagination ディレクティブを使用してページ番号リンクをレンダリングし、データを含めます。 @scripts ディレクティブでは、jQuery を使用してクリックイベントを処理し、データをレンダリングします。

スタイルの作成

最後に、ページの見栄えを良くするためにいくつかのスタイルを追加する必要があります。次のコードを public/css/app.css ファイルに追加します。

.card {
    border: none;
}

.card-text {
    color: #555;
}

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

ログイン後にコピー

これで、Laravel アプリケーションで Ajax ページネーションを使用する準備が整いました。ユーザーがページ番号のリンクをクリックすると、ページは更新されずにデータをロードします。これにより、特にデータ量が特に多い場合に、ユーザーエクスペリエンスが大幅に向上します。

概要

この記事では、Laravel フレームワークを使用して Ajax ページングを実装する方法を紹介します。 Ajax ページネーションを使用すると、特にデータ量が大きい場合に、Web アプリケーションのユーザーエクスペリエンスを大幅に向上させることができます。 Laravel フレームワークを使用すると、この機能を簡単に実装し、アプリケーションを最適化できます。この記事がお役に立てば幸いです!

以上がLaravelでAjaxページングを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。