
Tích hợp Datatables vào project Laravel
DataTables là một plugins của jQuery. Nó là một công cụ rất linh hoạt, cho phép tạo tables một cách linh hoạt với phân trang, tìm kiếm ....
Trong bài viết này chúng ta sẽ tìm hiểu cách tích hợp Datatables vào Laravel để xử lý cả phải server side và client side.
Bước 1: Tạo project Laravel
- Để tạo project Laravel chúng ta dùng lệnh sau
composer create-project --prefer-dist laravel/laravel datatables
Bước 2: Cài đặt Yajra Datatable Package
- Yajra Datatable Package là package hỗ trợ xử lý Server side cho Datatables
- Các bạn có thể xem thêm về package này tại đây
- Để cài đặt package chúng ta dùng lệnh sau:
composer require yajra/laravel-datatables-oracle
Bước 3: Tạo Auth
- Với Laravel 5.7, 5.8
php artisan make:auth
- Với Laravel 6
composer require laravel/ui --dev
php artisan ui vue --auth
Bước 4: Tạo tables
php artisan migrate
Bước 5: Tạo route
Route::get('users', '[email protected]')->name('users.index');
Bước 6: Tạo controller
php artisan make:controller UserController
Nội dung file UserController như sau:
<?php
namespace App\Http\Controllers;
use App\User;
use Illuminate\Http\Request;
use Yajra\Datatables\Datatables;
class UserController extends Controller
{
public function index()
{
if (request()->ajax()) {
return $this->datatables();
}
if (view()->exists('user')) {
return view('user');
}
return abort('404');
}
public function datatables()
{
$users = User::select('id', 'name', 'email')->get();
return Datatables::of($users)
->addColumn('action', function ($user) {
$deletebtn = '<a class="btn btn-secondary btn-sm" href=""><i class="fa fa-trash-o"></i></a>';
return $deletebtn;
})
->removeColumn('id')
->rawColumns(['action'])
->make(true);
}
}
Bước 7: Tạo view: resources/views/users.blade.php
<!DOCTYPE html>
<html lang="{{str_replace('_', '-', app()->getLocale())}}">
<head>
<title>Datatables Example</title>
<meta name=csrf-token content="{{ csrf_token() }}">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<link href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css" rel="stylesheet">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin=anonymous>
</head>
<body>
<div class="container">
<table class="table table-bordered datatable">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<script src=https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/core.js></script>
<script src=https://cdn.datatables.net/1.10.20/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.20/js/dataTables.bootstrap4.min.js></script>
</body>
<script type=text/javascript>
$('.datatable').DataTable({
processing: true,
serverSide: true,
ajax: "{{ route('users.index') }}",
columns: [
{data: 'name', name: 'name'},
{data: 'email', name: 'email'},
{data: 'action', name: 'action', orderable: false, searchable: false},
]
});
</script>
</html>
Bước 8: Test
http://example.com/users
Các bạn copy bài viết sang website khác, vui lòng ghi nguồn VietLaravel.com. Xin cảm ơn.
Post Comment