√ Cara Mempercepat DataTable pada Proyek Laravel: Tips, Trik, dan Contohnya

 

Ketika mengembangkan aplikasi web dengan Laravel, sering kali kita menggunakan DataTable untuk menampilkan dan
mengelola data dalam bentuk tabel yang interaktif.

Namun, seiring bertambahnya jumlah data, performa DataTable bisa
menurun. Dalam postingan ini, kita akan membahas cara mempercepat DataTable pada proyek Laravel dengan tips, trik,
dan contoh singkat yang mudah diikuti.

Tips dan Trik

1. Server-side Processing: Aktifkan server-side processing untuk mengurangi beban pada browser dan
   mempercepat waktu pemuatan data.


2. Indeksasi Database: Buat indeks pada kolom yang sering digunakan dalam pencarian dan pengurutan
   untuk meningkatkan kecepatan query.


3. Lazy Loading: Gunakan teknik lazy loading untuk hanya memuat data yang diperlukan saat
   diperlukan.


4. Paginasi: Terapkan paginasi untuk membatasi jumlah baris yang ditampilkan pada satu halaman,
   sehingga mengurangi waktu tunggu.


5. Optimasi Query: Optimalkan query database Anda dengan mengurangi jumlah join dan menggunakan
   subquery bila perlu.
6. Query Laravel tanpa Get(): Biarkan datatable yang melakukan get karena ini sangat signifikan.

Contoh Singkat

Misalkan kita memiliki tabel users dengan ribuan baris data. Berikut adalah contoh cara mengaktifkan
server-side processing dengan DataTables pada proyek Laravel:

1. Pasang paket DataTables untuk Laravel:

   composer require yajra/laravel-datatables-oracle
   

   
   


2. Tambahkan provider dan alias pada file config/app.php:

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

   
   


3. Buat controller baru:

   php artisan make:controller UserController --resource
       

   
   


4. Tambahkan kode berikut pada UserController:

   use DataTables;
   
           public function index()
           {
               if (request()->ajax()) {
                   $users = User::select(['id', 'name', 'email', 'created_at', 'updated_at']);
                   return DataTables::of($users)->make(true);
               }
           
               return view('users.index');
           }
   

   
   


5. Tambahkan kode berikut pada file view users.index:

   <table id="users-table" class="table table-bordered table-striped">
           <thead>
               <tr>
                   <th>ID</th>
                   <th>Nama</th>
                   <th>Email</th>
                   <th>Dibuat</th>
                   <th>Diubah</th>
               </tr>
           </thead>
       </table>
       
       @push('scripts')
       <script>
       $(function() {
           $('#users-table').DataTable({
               processing: true,
               serverSide: true,
               ajax: '{!! route('users.index') !!}',
               columns: [
                   { data: 'id', name: 'id' },
                   { data: 'name', name: 'name' },
                   { data: 'email', name: 'email' },
                   { data: 'created_at', name: 'created_at' },
                   { data: 'updated_at', name: 'updated_at' },
               ]
           });
       });
       </script>
       @endpush

   
   

Kesimpulan

Dengan menerapkan tips dan trik dalam postingan ini, Anda dapat mempercepat performa DataTable pada proyek Laravel
Anda. Ingatlah untuk selalu mengoptimalkan query database, menggunakan server-side processing, dan menerapkan teknik
seperti lazy loading dan paginasi.

Penutup

Semoga postingan ini membantu Anda dalam meningkatkan performa DataTable pada aplikasi Laravel Anda. Terus eksplorasi
berbagai teknik dan praktik terbaik untuk memastikan aplikasi Anda tetap cepat dan responsif. Selamat mencoba!