Server side datatable là gì?
Trong blog này, chúng ta sẽ biết về Server Side Datatable sử dụng Laravel. Data Table là một trong những plugin quan trọng nhất trong Thư viện jQuery để hiển thị dữ liệu trong bảng với chức năng tìm kiếm nâng cao.
Datatable rất quan trọng để hiển thị dữ liệu lớn vào bảng. ưu điểm chính của bảng dữ liệu là nó cung cấp cho người dùng chức năng tìm kiếm nâng cao để lọc dữ liệu và nó cũng cung cấp rất nhiều chức năng thân thiện với người dùng như sắp xếp, phân trang và tìm kiếm và các chức năng khác để xử lý dữ liệu cơ sở dữ liệu trong các trang web của chúng tôi .
Nhưng có 1 khuyết điểm nếu bạn dùng Datatable đó chính là việc nếu dữ liệu lên con số hàng triệu record thì việc load trang sẽ ảnh hưởng đến người dùng (Thời gian chờ server xử lý) vì Datatable yêu cầu phải lấy tất cả dữ liệu cùng 1 lúc
Để khắc phục điều đó, ta sẽ sử dụng Server Side Datatable.
Kiến thức cần có để thực hiện bài viết này
Đã chuẩn bị môi trường cho Laravel
Có kiến thức nền tảng về Laravel
Đã sử dụng qua data table của jquery
Nếu bạn đã thấy đáp ứng được thì bắt đầu thôi
Bước 1: Khởi tạo dự án laravel
composer create-project --prefer-dist laravel/laravel demo-datatableBước 2: Cấu hình database
Cấu hình kết nối DB trong file .env (các bạn tự tìm hiểu nhé)
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=<DATABASE NAME>
DB_USERNAME=<DATABASE USERNAME>
DB_PASSWORD=<DATABASE PASSWORD>Bước 3: Cài đặt Yajra Datatables
composer require yajra/laravel-datatables-oracle:"~9.0"Bạn có thể tuỳ theo version mà cài đặt cho phù hợp với Project của bạn nhé, ở đây mình dùng 9.0
Bước 4: Thêm Route
Thêm một controller để xử lý trong route/web.php
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\UserController;
Route::get('users', [UserController::class, 'index'])->name('users.index');Bước 5: Tạo 1 function trong controller
Thêm một controller để xử lý trong route/web.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\User;
use DataTables;
class UserController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index(Request $request)
{
if ($request->ajax()) {
$data = User::select('id','name','email')->get();
return Datatables::of($data)->addIndexColumn()
->addColumn('action', function($row){
$btn = '<a href="javascript:void(0)" class="btn btn-primary btn-sm">View</a>';
return $btn;
})
->rawColumns(['action'])
->make(true);
}
return view('users');
}
}Bước 6: Tạo 1 view
<!DOCTYPE html>
<html>
<head>
<title>Laravel 8 Server Side Datatables Tutorial</title>
<meta name="csrf-token" content="{{ csrf_token() }}">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12 table-responsive">
<table class="table table-bordered user_datatable">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
<th width="100px">Action</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
</body>
<script type="text/javascript">
$(function () {
var table = $('.user_datatable').DataTable({
processing: true,
serverSide: true,
ajax: "{{ route('users.index') }}",
columns: [
{data: 'id', name: 'id'},
{data: 'name', name: 'name'},
{data: 'email', name: 'email'},
{data: 'action', name: 'action', orderable: false, searchable: false},
]
});
});
</script>
</html>Đến đây bạn hãy chạy dự án với link: /user để thử nhé.
Đến đây bạn sẽ dựng được một server side datatable lên rồi, phần sau mình sẽ giúp các bạn custom giao diện để nó có thể phù hợp với mọi dự án của bạn mà không hề bó buộc trong giao diện mặc định của server side datatable.
