استفاده از ajax هنگام pagination در لاراول

حمید تیموری 844 بازدید 1398/03/17
استفاده از ajax هنگام pagination در لاراول

برای حل اینگونه مسائل در لاراول دو روش وجود دارد:

روش اول اینکه داده ها را از طریق json به کلاینت ارسال کنیم و با استفاده از جاوااسکریپت html های هر item را ایجاد کنیم.
(من پیشنهاد میکنم که از روش اول استفاده کنید)

روش دوم اینکه به شکل زیر عمل کنیم:
فکر کنید میخواهید مدل اطلاعات مدل Product را به صورت ajax نمایش دهید:
به کنترلر مربوطه میرویم:

<?php

namespace App\Http\Controllers;

use App\Product;
use App\Http\Controllers\Controller;

class ProductController extends Controller
{

    public function index()
    {
        $products = Product::latest()->paginate(15);

        return view("product.index", compact("products"));
    }
    
}

در حالت عادی، ما به صورت بالا داده ها را از کنترلر به view ارسال میکنیم،
ولی اگر بخواهیم این اطلاعات و view را از طریق ajax به سمت client ارسال کنیم باید از json استفاده کنیم.

به html زیر دقت کنید:

<div class="container">
    <div class="row">
        <div class="col-lg-3 col-md-3 col-sm-4  col-xs-12">
             <div class="objectsWrapper">

             </div>
        </div>
    </div>
</div>

ما میخواهیم محصولات را درون div با کلاس objectsWrapper به صورت یک لیست نمایش دهیم.
حالا با استفاده از جاوااسکریت یا فریمورک یا کتابخانه های آن درخواست را به صورت ajax به سمت سرور ارسال میکنیم؛
پس کدی شبیه به کد زیر را در blade یا فایل js خود بنویسید:

<script type="text/javascript">
    (function ($) {
        $(document).ready(function () {

            var objectsWrapper = $(".objectsWrapper");
            $.ajax({
                type: "GET",
                url: "/products",
               
                success: function (res) {
                    objectsWrapper.html(res);
                },
                error: function (res) {
                    console.log(res);
                    alert('something went wrong...');
                }
            })
        });
    })
    (jQuery)
</script>

با توجه به کد بالا، یک درخواست ajax به سرور ارسال میشود، و جواب آن درون div چاپ میشود.


به کد زیر در کنترلر دقت کنید:

<?php

namespace App\Http\Controllers\Client;

use App\Product;
use App\Http\Controllers\Controller;

class ProductController extends Controller
{

    public function index()
    {
        $products = Product::latest()->paginate(15);

        return response()
             ->json(view('product.index', ['products' => $products])->render());
    }

}

از طریق کد بالا داده ها و حتی view را از طریق json سمت client ارسال میکنیم.
حالا فایل view مورد نظر را مشاهده کنید:

<ul>
   @foreach($products as $product)
      <li>{{$product->title}}</li>
   @endforeach
</ul>

<div class="my-pagination">
    {{$products->links()}}
</div>

میبینید که محصولات در یک لیست چاپ شده اند، و pagination هم زیر لیست چاپ شده است.

حالا با استفاده از jquery عملیات pagination را انجام میدهیم:
به کد زیر دقت کنید:

<script>
    $('body').on('click', '.my-pagination ul.pagination li a', function (e) {
        e.preventDefault();
        $.ajax({
            url: $(this).attr('href'),
            type: 'get',
            success: function (res) {
                $(".objectsWrapper").html(res);
            },
            error: function (res) {
                alert("Something wrong...");
                console.log(res);
            }
        });
    });
</script>

با استفاده از کد بالا، عملیات pagination از طریق ajax انجام خواهد شد....

اگر سوالی داشتید از طریق نظرات بپرسید.

دیگر مقالات
حمید تیموری 888 بازدید 1398/01/14
امید کیانی 2061 بازدید 1398/06/19
حمید تیموری 2378 بازدید 1397/05/09
حمید تیموری 1296 بازدید 1397/10/06


نظرات (2)
شاهین مرادی
1398/03/17 - 18:00
عالی بود حمید، ولی من سالهاس از روش اول استفاده می کنم، اما این روشی که تو تدریس کردی بدرد کسایی میخوره که برای فرانت از فریم ورک های جاوااسکریپتی مثل ویو و ریکت استفاده می کنن
حمید تیموری
1398/03/17 - 19:39
خواهش میکنم شاهین جان.
اتفاقا افرادی که از فریموروک های جاوااسکریپت مثل vuejs استفاده میکنن، بهتره از روش اول استفاده کنن
برای ثبت نظر ابتدا وارد سایت شوید