Bước 1 : Cài đặt dự án laravel 

Chạy lệnh sau để cài đặt

composer create-project laravel/laravel laravel_datatable

Bạn có thể dùng cmd hoặc gitbash để chạy câu lệnh trên, ở đây mình dùng phần mềm gitbash

Bước 2 : Sau khi cài đặt dự án laravel ta chạy lệnh tạo migation 

Ở thư mục root của dự án ta chạy lệnh sau

php artisan make:migration create_categories_table

Ta vào thư mục database\migration để khai báo các trường của bảng dữ liệu. Xem ví dụ như trong hình

Bước 3 : Tạo seeder cho database

Ta chạy lệnh sau 

php artisan make:seeder CategorySeeder

 

Sau khi chạy lệnh xong ta mở file seeder để khai báo, xem ví dụ như trong hình

Ở hình trên mình chạy vòng lặp để thêm vào các phần tử có prent_id là các phần tử được thêm trước nó.

Bước 4 : tạo controller xử lý

chúng ta chạy lệnh sau để tạo controller

php artisan make:controller CategoryController

Sau khi chạy lệnh trên chúng ta sẽ có file CategoryController.php trong thư mục App\Http\Controllers

Bước 5 : Chúng ta tạo route 

Vào file routes\web.php khai báo các route như hình

Trong ví dụ này chúng ta chỉ cần khai báo 2 route ở dưới thôi

Bước 6 : Tạo hàm xử lý trong controller

Chúng ta mở file CategoryController.php trong thư mục App\Http\Controllers và khai báo 2 hàm như trong hình

Hàm index để chúng ta load cái view ban đầu

Lưu ý các biến post truyền vào bắt buộc các key như hình, vì đó là các key quy định của thư viện datatable, sau khi nhận được các biến này tra thực hiện kiểm tra điều kiện và lấy ra danh sách data trả về cho fontend, chú ý có 2 trường đếm tổng số bản ghi, các key của nó trả về cũng lấy y hệt như hình vì nó quy định thế rồi, nếu thay có thể sẽ phát sinh lỗi.

Hàm dataTable để xử lý các request của datatable serveside

Bước 7 : Khai báo view cho ứng dụng

Trong thư mục resources\views\categories ta tạo file index.blade.php nội dung bao gồm 1 thẻ card và 1 thẻ table trong thẻ card như hình

Ở hình trên mình tách thẻ table ra 1 file con. Điểm chú ý quan trọng là thêm thẻ meta có content là token và thẻ input có id là base như đánh dấu trong hình để phục vụ cho việc gọi ajax lấy dữ liệu

Đây là thẻ table sau khi đã tách ra

Bước 8: khai báo ajax để gọi API từ serve

Chúng ta sẽ khai báo thông tin như hình sau 

Chúng ta phải chèn file css và file js của thư viện datatable trước khi làm bước này nhé. như hình trên chúng ta khai báo route xử lý trong mục url, truyền token trong mục data như hình trên. Mục colums khai báo các trường trùng với các trường trả về từ server

Hoàn thành : Chúng ta sẽ có bảng data như hình với các chức năng phân trang, tìm kiếm, và filter theo cột, hiển thị số bản ghi theo option

Tải code

Chúc bạn thành công !