by 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
