امروز با آموزش صفحه بندی ایجکسی Ajax Pagination در لاراول ۵٫۲ در خدمتتون هستیم ، که خیلی کاربردی هست و شاید برای شما هم پیش افتاده باشه که بخواید صفحه بندی های وب سایتتون رو به صورت ایجکس پیاده سازی کنید و از هر بار رفرش برای بروزرسانی صفحه جلوگیری کنید .

صفحه بندی ایجکس با Pjax در لاراول

خب در اینجا ما تصمیم داریم که از کتابخانه جیکوئری Pjax استفاده کنیم که در ادامه یک توضیح کوتاهی درمورد Pjax خواهم داد که کارش چیه و به چه دردی میخوره .

کتابخانه جیکوئری Pjax چیست ؟

pjax پلاگینی است خوب برای کار با pushState و ajax که کار با آن نیز ساده است. روش استفاده از آن بدین شکل است که در سمت کلاینت کافی است به لینک‌هایی که می‌خواهید با pjax لود شود، کلاس خاصی بیفزایید و سپس یک خط کد بنویسد که لینک‌هایی با فلان کلاس، به وسیله pjax لود شود. در سمت سرور نیز تنظیم کوچکی لازم است که اگر هدر x-pjax ارسال شده بود، صفحه را بدون فریم ارسال کند.

روش استفاده از Pjax در پروژه لاراول :

گام اول : ابتدا برای اطلاعات بیشتر میتونید به سایت گیت هاب مراجعه کنید : defunkt/jquery-pjax و از امکانات و آپشن های این کتابخانه مطلع شوید .

در ادامه ابتدا باید فایل jquery.pjax.js رو دانلود و در پروژه خود اضافه کنید .

<script src=https://cdnjs.cloudflare.com/ajax/libs/jquery.pjax/1.9.6/jquery.pjax.js type=text/javascript></script>

نکته : حتما از وجود کتابخانه jquery.js در پروژه خود اطمینان حاصل کنید در غیر اینصورت با مشکل روبه رو خواهید شد.

گام دوم : حالا باید یک تگ اسکریپت رو باز کنید و درون کد زیر را قرار دهید :

<script type=text/javascript>$(document).pjax('.pagination li a', '#pjax-container');</script>

در ادامه توضیح میدم که id و class که باید قرار بدیدم در کد بالا به چه شکل هست .

خب تا اینجای کار ما کتابخانه Pjax رو به پروژه اضافه کردیم حالا باید بریم به سراغ Controller مون و کدهایی که میخوام جهت صفحه بندی کردن اطلاعات قرار بدیم .

فایل CategoryController.php:

public function index()
{
    $categories  = Category:: paginate(10);
    return view('Categories.index')->with('categories',$categories);
}

در خط اول یک متغیر داریم به نام category$ که داخلش داره از مدل Category اطلاعات رو دریافت میکنه و با استفاده از (۱۰) paginate تعداد آیم های قابل نمایش در هر صفحه رو مشخص میکنه و در خط پایینشم داریم view مربوطه رو به همراه متغیر category$ برمیگردونیم.

گام سوم : حالا باید به فایل View مورد نظر بریم و کدهای مربوط به نمایش محتویات صفحه رو درون یک حلقه foreach قرار بدیم و در نهایت pagination مون رو رندر کنیم .

فایل index.blade.php:

<div class=container id=pjax-container>
    <div class=table-scrollable >
        <table class=table table-hover table-light >
            <thead>
            <tr>
                <th> # </th>
                <th> نام دسته </th>
                <th> فعالیت </th>
                <th> وضعیت </th>
                <th> تاریخ</th>
            </tr>
            </thead>
            <tbody>
                @foreach($categories as $category)
                    <tr>
                        <td>{&#8205;{ $category->id }}</td>
                        <td>{&#8205;{ $category->name }}</td>
                        <td>{&#8205;{ $category->active }}</td>
                        <td>{&#8205;{ $category->created_at}}</td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
    {&#8205;{ $categories->links() }}
</div>

خب همین طورکه پیداست ما با استفاده یک حلقه foreach داریم اطلاعات رو داخل جدولی که داریم چاپ میکنیم و همچنین با استفاده از {‍{ ()categories->links$ }} صفحه بندی خودمون رو نمایش میدیم .

اما بریم سراغ چند نکته کلید که یادآور شده بوددم توضیح بدم :

همون طور که عرض کردم در بالا کار pjax لود اطلاعات در صفحه در یک قسمت مشخص هستش که بدون رفرش صحفحه اطلاعات رو به صورت ایجکسی بروزرسانی میکنه ، که ما در اینجا باید به کلاس container مون یک آیدی با نام id=pjax-container اضافه کنیم و این رو به Pjax معرفی کنیم که قرار این قسمت از صفحه مون بروزرسانی بشه .

مورد بعدی اینکه در اسکریپت بالا ما گفتیم که Pjax بیاد و تگ های a موجود در کلاس pagination رو در نظر بگیره ، و زمانی که کلیک شد درخواست ها رو به صورت ایجکسی برای ما ارسال کنه .

نکته ۲ : حتما کد {‍{ ()categories->links$ }} رو داخل کلاس container تون قرار بدید و گرنه pjax کار نخواهد کرد و صفحه شما رفرش خواهد شد. :cry:

نکته ۳ : هیچ لزومی نداره که اسم کلاس و یا ایدی تون حتما مطابق نام گزاری بالا باشه و از هرنام دلخواهی میتوانید استفاده کنید فقط در نظر داشته باشید که هرنامی برای ایدی تون در نظر گرفتید باید در اسکریپت بالا هم همون نام رو در نظر بگییرید .

گام چهارم : فقط یک قدم دیگر تا نتیجه کار باقی است ، که شما باید یک سری تنظیمات داخل سروتون انجام بدید بدین شکل که شما باید ابتدا فایل PjaxMiddleware رو که پیوست کردم در پایین مقاله دانلود کنید و داخل پوشه : app/Http/Middleware

کپی کنید و در آخر باید کلاس PjaxMiddleware رو در فایل kernel.php در مسیر app/Http/Kernel.php اضافه کنید :

protected $middlewareGroups = [
        'web' => [
            \App\Http\Middleware\EncryptCookies::class,
            \Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class,
            \Illuminate\Session\Middleware\StartSession::class,
            \Illuminate\View\Middleware\ShareErrorsFromSession::class,
            \App\Http\Middleware\VerifyCsrfToken::class,
            \App\Http\Middleware\PjaxMiddleware::class, // این خط اضافه شود
        ],

    'api' => [
       'throttle:60,1',
    ],
];

خب به همین راحتی شما توانستید صفحه بندی خودتون رو توسط Pjax ایجکسی کنید ، لازم به ذکر که شما میتونید از Pjax در بخش های مختلف دیگه پروژه تون هم استفاده کنید و این سرعت سایت شما رو به صورت قابل چشم گیری بالا میبره ، صرفا ما در این مقاله برای اینکه صفحه بندی ایجکسی داشته باشیم بدین شکل استفاده کردیم . حالا میتونید به صفحه مورد نظر مراجعه کنید و نتیجه را ملاحظه کنید .

فایل پیوست : PjaxMiddelware.zip