Tutorial Laravel 8 Datatables – Yajra Datatables

Pada tutorial kali ini, saya akan membahas bagaimana membuat datatable di laravel 8. Untuk hasilnya nanti Anda bisa unduh di halaman github saya.

Datatable memudahkan kita untuk melakukan pencarian, pagination, ordering, sorting, dan lain sebagainya. Pada dasarnya,datatable menggunakan jQuery plugin yang memudahkan kita dalam melakukan interaksi dengan HTML table data kita.

Pada datable juga kita dapat menggunakan ajax untuk meringankan beban query di tampilan htmlnya.

Ok kita langsung saja melakukan tutorial kita.

Langkah Pertama

Install Laravel 8

Pada langkah ini, silahkan teman-teman install laravel dulu, disini saya menggunakan laravel versi 8. Saya menggunakan composer untuk menginstallnya.

composer create-project laravel/laravel:^8.0 laravel-datatable

cd example-app
 
php artisan serve

Jika teman-teman menggunakan install laravel global bisa gunakan kode berikut:

composer global require laravel/installer
 
laravel new laravel-datatable
 
cd laravel-datatable
 
php artisan serve

Namun, jika menggunakan cara tersebut. Project kita akan menggunakan versi terbaru dari laravel. Sedangkan requirement di laravel terbaru terkadang berbeda.

Install Plugin Yajra Datatable

Langkah berikutnya, kita membutuhkan plugin yajra datatable, jadi teman-teman bisa mengikut langkah berikut untuk menginstall plugin yajra datatable

composer require yajra/laravel-datatables-oracle
composer require yajra/laravel-datatables-buttons

Setelah selesai, kita tambakan alias di config provider kita.


        Yajra\DataTables\DataTablesServiceProvider::class,
        Yajra\DataTables\ButtonsServiceProvider::class,

Kemudian, kita publish vendor laravel datatable

php artisan vendor:publish

pilih 0

Setting environment

Buka file .env di laravel project kita

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=
DB_USERNAME=root
DB_PASSWORD=

Silahkan teman-teman ubah konfigurasi database untuk dapat menyambungkan ke dalam dataabase.

Migrate default data

Lakukan migrasi data default dengan menggunakan perintah dibawah ini.

php artisan migrate

Tambahkan Data Dummy

Mari kita tambahkan data dummy sebagai contoh untuk data kita. Sebagai contoh saya akan membuat data dummy sebanyak 100.

php artisan tinker

User::factory()->count(100)->create()

Tambahkan Route

Pada langkah ini, kita akan membuat sebuah route untuk dapat mengakses url. Silahkan buka file routes/web.php kemudian tambahkan kode berikut:

routes/web.php

<?php
  
use Illuminate\Support\Facades\Route;
  
use App\Http\Controllers\UserController;
  
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
  
Route::get('users', [UserController::class, 'index'])->name('users.index');

Buat Sebuah Controller

Teman-teman buatlah sebuah controller. Disini saya menggunakan perintah berikut:

php artisan make:controller UserController --resource

Secara otomatis akan menggenerate file UserController seperti berikut:

app/Http/Controllers/UserController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class UserController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        //
    }

    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function create()
    {
        //
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        //
    }

    /**
     * Display the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function show($id)
    {
        //
    }

    /**
     * Show the form for editing the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function edit($id)
    {
        //
    }

    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, $id)
    {
        //
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function destroy($id)
    {
        //
    }
}

Buat Sebuah Service Datatable

php artisan datatables:make UsersDataTable

Ubah

<?php

namespace App\DataTables;

use App\Models\UsersDataTable;
use Yajra\DataTables\Html\Button;
use Yajra\DataTables\Html\Column;
use Yajra\DataTables\Html\Editor\Editor;
use Yajra\DataTables\Html\Editor\Fields;
use Yajra\DataTables\Services\DataTable;

Menjadi

<?php

namespace App\DataTables;

use App\Models\Users;
use Yajra\DataTables\Html\Button;
use Yajra\DataTables\Html\Column;
use Yajra\DataTables\Html\Editor\Editor;
use Yajra\DataTables\Html\Editor\Fields;
use Yajra\DataTables\Services\DataTable;

Lengkapnya

<?php

namespace App\DataTables;

use App\Models\User;
use Yajra\DataTables\Html\Button;
use Yajra\DataTables\Html\Column;
use Yajra\DataTables\Html\Editor\Editor;
use Yajra\DataTables\Html\Editor\Fields;
use Yajra\DataTables\Services\DataTable;

class UsersDataTable extends DataTable
{
    /**
     * Build DataTable class.
     *
     * @param mixed $query Results from query() method.
     * @return \Yajra\DataTables\DataTableAbstract
     */
    public function dataTable($query)
    {
        return datatables()
            ->eloquent($query)
            ->addColumn('action', 'usersdatatable.action');
    }

    /**
     * Get query source of dataTable.
     *
     * @param \App\Models\UsersDataTable $model
     * @return \Illuminate\Database\Eloquent\Builder
     */
    public function query(User $model)
    {
        return $model->newQuery();
    }

    /**
     * Optional method if you want to use html builder.
     *
     * @return \Yajra\DataTables\Html\Builder
     */
    public function html()
    {
        return $this->builder()
                    ->setTableId('usersdatatable-table')
                    ->columns($this->getColumns())
                    ->minifiedAjax()
                    ->dom('Bfrtip')
                    ->orderBy(1)
                    ->buttons(
                        Button::make('create'),
                        Button::make('export'),
                        Button::make('print'),
                        Button::make('reset'),
                        Button::make('reload')
                    );
    }

    /**
     * Get columns.
     *
     * @return array
     */
    protected function getColumns()
    {
        return [
            Column::computed('action')
                  ->exportable(false)
                  ->printable(false)
                  ->width(60)
                  ->addClass('text-center'),
            Column::make('id'),
            Column::make('name'),
            Column::make('email'),
            Column::make('created_at'),
            Column::make('updated_at'),
        ];
    }

    /**
     * Get filename for export.
     *
     * @return string
     */
    protected function filename()
    {
        return 'Users_' . date('YmdHis');
    }
}

Buat Sebuah View

Langkah terakhir kita buat sebuah view seperti berikut:

<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Laravel Datatable - Brilliansolution.com</title>

    <!-- Bootstrap CSS -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/dataTables.bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.0.3/css/buttons.dataTables.min.css">

</head>

<body>

    {!! $dataTable->table() !!}

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Bootstrap JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    
    <script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.12.1/js/dataTables.bootstrap.min.js"></script>

    <script src="https://cdn.datatables.net/buttons/1.0.3/js/dataTables.buttons.min.js"></script>
    <script src="/vendor/datatables/buttons.server-side.js"></script>
    {!! $dataTable->scripts() !!}
    <!-- jQuery -->
</body>

</html>

Sekarang, semuanya telah siap.

Silahkan teman-teman coba running aplikasi laravelnya

php artisan serve

Kemudian buka localhost:8000.

Jika ada kesulitan silahkan tinggalkan di kolom komentar.

Anda bisa unduh filenya di github saya

Related keywords

  • Laravel datatables
  • datatable laravel
  • yajra datatable
  • laravel datatable yajra

Leave a Reply

%d bloggers like this: