Cara Menggunakan DataTables di Laravel

Tutorial cara Menggunakan DataTables di Laravel.

Server-side DataTables

Membuat Server-side DataTables pada Laravel – Datatables adalah sebuah library yang membantu kita dalam menyajikan data dalam bentuk table dengan fitur bawaan seperti paging, seraching dan sorting tanpa perlu membuat script untuk membuat fitur tersebut.

Khusus untuk Framewok Laravel sudah tersedia sebuah library datatables khusus untuk laravel bernama yajra.

Tutorial cara Menggunakan DataTables di Laravel adalah sebagai berikut:

1. Install Yajra DataTables

Untuk install datatable kita akan menggunakan composer, silahkan buka terminal/cmd kemudian pastikan posisi pointer sekarang di dalam proyek Laravel Anda dan silahkan ketikan perintah berikut ini:

composer require yajra/laravel-datatables-oracle:"~9.0"

2. Konfigurasi Datatable pada Laravel

Setelah proses download datatable selesai maka kita masuk ke tahapan selanjutnya yaitu mendaftarkan provider dan facade datatable pada sistem laravel.

Silahkan buka app.php yang ada pada folder config dan tambahkan dua kode berikut pada block providers dan aliases.

Tambahkan kode berikut pada block providers:

'providers' => [
    ...,
    Yajra\DataTables\DataTablesServiceProvider::class,
]

Kemudian kode berikut pada block aliases:

'aliases' => [
    ...,
    'DataTables' => Yajra\DataTables\Facades\DataTables::class,
]

3. Membuat Data JSON

Sekarang kita akan menggunakan format datatable untuk menggenerate data dalam bentuk format JSON.

Tambahkan kode berikut pada file controller yang akan Anda gunakan, posisikan di bagian paling atas:

use DataTables;

Kemudian tambahkan function berikut pada file controller Anda:

public function getKliping()
    {
        $data = KlipingModel::select('*')
                ->join('tb_kat_berita', 'tb_kliping.id_kat_berita', '=', 'tb_kat_berita.id_kat_berita')
                ->where('tb_kliping.id_stat_kliping', 2)
                ->limit(100)
                ->get();
        return DataTables::of($data)->make(true);
    }

Sehingga kode lengkap controller kita menjadi seperti berikut ini:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\KlipingModel;
use DataTables;

class HomeController extends Controller
{
    public function index()
    {
        return view('home');
    }

    public function getKliping()
    {
        $data = KlipingModel::select('*')
                ->join('tb_kat_berita', 'tb_kliping.id_kat_berita', '=', 'tb_kat_berita.id_kat_berita')
                ->where('tb_kliping.id_stat_kliping', 2)
                ->limit(100)
                ->get();
        return DataTables::of($data)->make(true);
    }
}

Selanjutnya kita buat route baru dengan method GET agar function tersebut bisa di akses melalui URL menggunakan web browser.

Route::get('kliping', [HomeController::class, 'getKliping']);

Sekarang silahkan buka browser Anda dan akses http://localhost:8000/kliping, pastikan tabel yang Anda gunakan sudah ada data nya, dan jika semua step yang sudah benar maka seharusnya akan muncul data JSON seperti dibawah ini:

4. Membuat View Untuk Menampilkan Data

Langkah selanjutnya adalah membuat view untuk menampilkan data.

Isi view untuk menampung tabel:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap.min.css">

<table id="table-register" class="table table-bordered table-hover">
  <thead>
    <tr>
      <th>No</th>
      <th>Judul Berita</th>
      <th>Kategori Berita</th>
      <th>Nama Media</th>
      <th>Tanggal Berita</th>
    </tr>
  </thead>
</table>

<<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="//cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap.min.js"></script>

Kemudian Script yang kita gunakan untuk menampilkan Server-side DataTables adalah sebagai berikut:

<script type="text/javascript">
  $(document).ready(function () {
    $('#table-kliping').DataTable({
      processing: true,
      serverSide: true,
      ajax: '{{url('kliping')}}',
      columns: [
        {
           render: function (data, type, row, meta) {
             return meta.row + meta.settings._iDisplayStart + 1;
           },
        },
        {
           data: 'jd_berita'
        },
        {
           data: 'nm_kat_berita'
        },
        {
           data: 'id_kliping'
        },
        {
           data: 'tgl_berita'
        },
        {
           "render": function ( data, type, row ) {
             return '<button class="btn btn-primary btn-sm" onclick="terima('+row.id')">Lihat</button>'
           }
        }
      ],
    });
  });
</script>

Sekarang silahkan buka web browser anda dan jalankan URL mengarah ke project DataTables Anda.

Berikut ini adalah contoh tampilan Server-side DataTables yang sudah berhasil kita install.

Client-side DataTables

Membuat Client-side DataTables pada Laravel