Cara Menggunakan Datatables Di Laravel

4 min read Jul 27, 2024

Cara Menggunakan DataTables di Laravel

DataTables adalah plugin JavaScript yang kuat dan populer untuk menampilkan dan memanipulasi data tabular di halaman web. Plugin ini menyediakan fitur-fitur seperti:

Pencarian: Memungkinkan pengguna untuk mencari data dalam tabel.
Penyortiran: Mengurutkan kolom data secara ascending atau descending.
Paging: Membagi data menjadi halaman untuk navigasi yang lebih mudah.
Pemfilteran: Memfilter data berdasarkan kriteria tertentu.
Banyak lagi: DataTables menawarkan banyak fitur tambahan untuk meningkatkan pengalaman pengguna, seperti kemampuan untuk menampilkan data yang diedit inline, mengunduh data dalam format yang berbeda, dan banyak lagi.

Berikut adalah langkah-langkah untuk mengintegrasikan DataTables dengan aplikasi Laravel Anda:

1. Instalasi

Pertama, Anda perlu menginstal paket DataTables untuk Laravel. Anda dapat melakukannya dengan menggunakan Composer:

composer require yajra/laravel-datatables-oracle

2. Konfigurasi

Setelah menginstal paket, Anda perlu mengonfigurasinya di aplikasi Laravel Anda. Buka file config/app.php dan tambahkan provider berikut:

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

3. Generate Controller

Selanjutnya, Anda perlu membuat controller yang akan menangani permintaan DataTables. Anda dapat menggunakan Artisan command:

php artisan make:controller DataTablesController

4. Implementasi Controller

Di dalam controller Anda, Anda perlu menentukan metode yang akan mengembalikan data yang akan ditampilkan di tabel DataTables. Metode ini harus mengembalikan instance DataTable yang berisi data yang akan ditampilkan.

Berikut adalah contoh metode controller yang mengembalikan data dari model Post:

use App\Models\Post;
use DataTables;

class DataTablesController extends Controller
{
    public function index()
    {
        $posts = Post::all();

        return DataTables::of($posts)
            ->addColumn('action', function ($post) {
                return 'Edit
                        
                            '. csrf_field() . '
                            '. method_field('DELETE') . '
                            
                        ';
            })
            ->make(true);
    }
}

5. Tampilkan Tabel DataTables

Terakhir, Anda perlu menampilkan tabel DataTables di tampilan Anda. Anda dapat menggunakan tag <div> dengan class dataTables_wrapper dan memanggil metode dataTable() di dalam controller Anda.


    @php
        $posts = App\Models\Post::all();
        return DataTables::of($posts)->make(true);
    @endphp

6. Script DataTables

Anda perlu menyertakan file JavaScript DataTables dan CSS di tampilan Anda. Anda dapat melakukannya dengan menggunakan tag <script> dan <link>:

7. Konfigurasi DataTables

Anda dapat menyesuaikan konfigurasi DataTables dengan menggunakan opsi with() dalam metode dataTable().

return DataTables::of($posts)
    ->with('dom', 'Bfrtip')
    ->make(true);

Kesimpulan

DataTables adalah plugin JavaScript yang sangat berguna untuk menampilkan dan memanipulasi data tabular di halaman web. Dengan mengintegrasikan DataTables dengan aplikasi Laravel Anda, Anda dapat membuat tabel data yang responsif dan mudah digunakan.

Cara Menggunakan Datatables Di Laravel