September 21, 2021

Laravel 8 phân trang sử dụng AJAX kết hợp với tìm kiếm và sắp xếp

Khi bạn có 1 bảng dữ liệu khổng lồ lên đến hàng trăm nghìn, hàng triệu bản ghi, việc hiển thị và sắp xếp, cũng như tìm kiếm dữ liệu là việc hết sức khó khăn. Sử dụng AJAX kết hợp Laravel phiên bản 8 với chức năng phân trang sẽ giúp bạn dễ dàng hơn khi làm việc. Đây chỉ là một trong số rất nhiều cách giúp bạn đạt được kết quả thôi, cùng tham khảo nhé

1. Kết nối đến Cơ sử dữ liệu

Bạn hãy mở file .env lên và điền các thông số của database

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=tutorial
DB_USERNAME=root
DB_PASSWORD=

2. Tạo bảng trong database

Tạo bảng có tên là Employees bằng cách sử dụng lện migration

php artisan make:migration create_employees_table

Sau đó tìm đến thư mục database/migrations/

Bạn sẽ nhìn thấy 1 file php có tên với đuôi là create_employees_table.php và mở nó lên

Tìm đến function có tên là up() và thay đổi như sau

public function up()
{
    Schema::create('employees', function (Blueprint $table) {
        $table->id();
        $table->string('username');
        $table->string('name');
        $table->string('email');
        $table->timestamps();
    });
}

Đây là dòng code để giúp bạn tạo bảng cơ sở dữ liệu có tên là employees

Rồi sau đó chạy lệnh

php artisan migrate

để hoàn thành

3. Tạo Model

Chạy lệnh sau để tạo model

php artisan make:model Employees

Mở file tại địa chỉ app/Models/Employees.php

Sau đó thêm các trường username, name, email như sau

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Employees extends Model
{
    use HasFactory;

    protected $fillable = [
       'username','name','email'
    ];
}

4. Tạo Controller

php artisan make:controller EmployeesController

Mở file app/Http/Controllers/EmployeesController.php lên và Import Model vừa tạo

use App\Models\Employees;

Tạo 2 methods:

  • index() để tải chế độ xem
  • getEmployees() để xử lý dữ liệu AJAX
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Employees;

class EmployeesController extends Controller
{
     public function index(){

         // Load index view
         return view('index');
     }

     // Fetch records
     public function getEmployees(Request $request){

        ## Read value
        $draw = $request->get('draw');
        $start = $request->get("start");
        $rowperpage = $request->get("length"); // Rows display per page

        $columnIndex_arr = $request->get('order');
        $columnName_arr = $request->get('columns');
        $order_arr = $request->get('order');
        $search_arr = $request->get('search');

        $columnIndex = $columnIndex_arr[0]['column']; // Column index
        $columnName = $columnName_arr[$columnIndex]['data']; // Column name
        $columnSortOrder = $order_arr[0]['dir']; // asc or desc
        $searchValue = $search_arr['value']; // Search value

        // Total records
        $totalRecords = Employees::select('count(*) as allcount')->count();
        $totalRecordswithFilter = Employees::select('count(*) as allcount')->where('name', 'like', '%' .$searchValue . '%')->count();

        // Fetch records
        $records = Employees::orderBy($columnName,$columnSortOrder)
               ->where('employees.name', 'like', '%' .$searchValue . '%')
              ->select('employees.*')
              ->skip($start)
              ->take($rowperpage)
              ->get();

        $data_arr = array();

        foreach($records as $record){
           $id = $record->id;
           $username = $record->username;
           $name = $record->name;
           $email = $record->email;

           $data_arr[] = array(
               "id" => $id,
               "username" => $username,
               "name" => $name,
               "email" => $email
           );
        }

        $response = array(
           "draw" => intval($draw),
           "iTotalRecords" => $totalRecords,
           "iTotalDisplayRecords" => $totalRecordswithFilter,
           "aaData" => $data_arr
        );

        return response()->json($response); 
     }
}

5. Tạo Route

Mở file routes/web.php

Thêm 2 router như sau

  • / – Xem trang kết quả
  • /getEmployees sử dụng để xử lý dữ liệu
<?php
use Illuminate\Support\Facades\Route; 
use App\Http\Controllers\EmployeesController; 

Route::get('/', [EmployeesController::class, 'index']); 
Route::get('/getEmployees', [EmployeesController::class, 'getEmployees'])->name('getEmployees');

6. Sử dụng thư viện jQuery

Ajax sử dụng jQuery để hoạt động, có nhiều cách để thực hiện điều đó, bạn có thể tải file tại đây hoặc sử dụng các CDN có sẵn:

<!-- Datatable CSS -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css"/>

<!-- jQuery Library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<!-- Datatable JS -->
<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>

7. Hiển thị

Tạo file index.blade.php trong thư mụcresources/views/.

Thêm các thư viện jQuery ở trên

vào tạo một table với id là empTable

<table id='empTable' >.

<!DOCTYPE html>
<html>
<head>
     <title>Datatables AJAX pagination with Search and Sort in Laravel 8</title>

     <!-- Meta -->
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     <meta charset="utf-8">

     <!-- Datatable CSS -->
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css"/>

     <!-- jQuery Library -->
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

     <!-- Datatable JS -->
     <script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>

</head>
<body>

    <table id='empTable' width='100%' border="1" style='border-collapse: collapse;'>
        <thead>
            <tr>
                 <td>S.no</td>
                 <td>Username</td>
                 <td>Name</td>
                 <td>Email</td>
            </tr>
         </thead>
     </table>

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

         // DataTable
        $('#empTable').DataTable({
             processing: true,
             serverSide: true,
             ajax: "{{route('getEmployees')}}",
             columns: [
                 { data: 'id' },
                 { data: 'username' },
                 { data: 'name' },
                 { data: 'email' },
             ]
         });

      });
      </script>
</body>
</html>

Như vậy là xong, bạn chỉ cần thêm dữ liệu vào database và hiển thị kết quả là được

8. DEMO

View Demo

 

Korakora

Chia sẻ kiến thức cho mọi người là niềm vui của mình

View all posts by Korakora →

Leave a Reply

Your email address will not be published. Required fields are marked *