Tích hợp Datatables vào project Laravel

Laravel Datatables

Tích hợp Datatables vào project Laravel

Sanvu88
2019-11-06 16:22:04
2882 view
(1 Likes)
Tích hợp Datatables vào project Laravel
5 Vote: (1 votes):

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