laravel-paginate-ajax-trungquandev

Phân trang trong Laravel kết hợp sử dụng Ajax

Xin chào tất cả các bạn, mình là Quân. Hôm nay chúng ta sẽ làm một ví dụ về phân trang trong Laravel kết hợp sử dụng kỹ thuật Ajax.

Trường hợp đơn giản đặt ra:

  • Mình sẽ làm một ví dụ đơn giản như thế này: Lấy hết các sản phẩm trong bảng products rồi phân trang cho nó. Bạn nào làm Laravel rồi sẽ biết trong framework này có phương thức ->paginate() để phân trang, sau đó qua bên view để hiển thị dữ liệu. 
  • Để kết hợp Ajax vào phân trang chúng ta sẽ làm thêm một bước nữa là viết code javascript ở bên trang view mà ta cho hiển thị cái phân trang đó.
  • Nói có vẻ khó hiểu, cứ đi vào code là sẽ ok ngay =))

1 – Viết Route và Controller

Vì route và controller cho ví dụ này khá ngắn nên mình gộp chung lại trong mục 1 này nhé.

Bạn vào  routes/web.php trong project laravel của bạn và thêm dòng code này vào:

<?php
Route::get('/', 'FrontEndController@get_home');

Tiếp theo bạn mở cmd đến thư mục project Laravel của bạn và chạy câu lệnh để tạo Controller:

php artisan make:controller FrontEndController

Sau đó vào app/Http/Controllers sẽ thấy file FrontEndController.php chúng ta sẽ viết function get_home trong file này:

Nội dung file FrontEndController.php:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Product;

class FrontEndController extends Controller
{
    public function get_home(Request $request){
        if($request->ajax() || 'NULL'){
    	    $products = Product::all();
    	    return view('front.pages.home',compact('products'));
        }
    }
}

Ở đoạn code trên mình lấy ra toàn bộ danh sách sản phẩm bằng Product::all() đây là cách viết Query BuilderModel trong Laravel, nếu đã đọc tới bài phân trang này thì mình chắc các bạn đã nắm được rồi. Còn bạn nào chưa nắm được thì xem tại docs của Laravel nhé.

Hoặc các bạn cũng có thể viết:

$products = DB::table('products')->get();
//hoặc
$products = DB::raw('select * from products');
//tùy cách các bạn muốn dùng thôi

2 – Viết View và code Ajax

Sau khi viết Controller ở trên, mình truyền dữ liệu products về view home.blade.php

Các bạn tạo thư mục bên trong resources/views theo cấu trúc sau: front/pages/home.blade.php

Code trong file home này như sau:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo Paginate - Trung Quân</title>
    <base href="{{ asset('') }}">
    <link href='http://fonts.googleapis.com/css?family=Dosis:300,400' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300' rel='stylesheet' type='text/css'>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
  </head>
  <body>
    <div class="show-products">
      @foreach($products as $product)
      {{ $product->name }} <br>
      @endforeach
    </div>
    {!! $products->links() !!}
    <script>
      $('.pagination a').unbind('click').on('click', function(e) {
             e.preventDefault();
             var page = $(this).attr('href').split('page=')[1];
             getPosts(page);
       });
      
       function getPosts(page)
       {
            $.ajax({
                 type: "GET",
                 url: '?page='+ page
            })
            .success(function(data) {
                 $('body').html(data);
            });
       }
    </script>
  </body>
</html>

Khó để giải thích chi tiết thành lời văn quá, các bạn cứ hiểu đơn giản là:

Đoạn code trong <div class=”show-products”> là mình cho hiển thị danh sách tên của các sản phẩm.

Dòng {!! $products->links() !!} là để hiển thị các nút phân trang mà Laravel đã tạo cho chúng ta.

Đoạn code trong <script> là để gửi request ajax lên route rồi route truyền qua controller, bên controller kiểm tra nếu có requestajax thì trả về dữ liệu sang view, sau đó ở trong .success(function(){…}) ta hiển thị dữ liệu đó ra. Quá trình này thì trình duyệt sẽ không phải f5 lại để nhận dữ liệu.


...

Vậy là xong bài này rồi đấy, trên thực tế thì chúng ta chỉ nên dùng Ajax khi cần thiết chứ không nên thấy nó hay mà lạm dụng, vì dùng nhiều Ajax trên 1 page, khi load page sẽ mất rất nhiều thời gian. Như bài này, chúng ta có thể dùng các thư viện Slider để hiển thị sản phẩm thay vì dùng Ajax, lại còn vừa đẹp vừa nhẹ nữa.

...


Done.

Nếu có gì thắc mắc hoặc cần hỏi, bạn có thể comment dưới Bài Viết này hoặc Liên Hệ với mình, mình sẽ trả lời bạn sớm nhất. Cảm ơn các bạn và hẹn gặp lại các bạn ở những bài hướng dẫn tiếp theo.

Best Regards – Trung Quân – Green Cat

trungquandev-img-modal

Khóa học lập trình làm việc thực tế:

Nếu các bạn thấy bài viết của mình có ích thì hãy ủng hộ mình bằng cách tham khảo bài viết giới thiệu khóa học cực kỳ chất lượng và chính chủ dưới đây của mình nhé, cảm ơn các bạn ^^

nodejs-mongodb-messenger-realtime-course-trungquandev
Node.js và MongoDB - Xây dựng một ứng dụng Messenger trò chuyện trực tuyến.