Magic-fast-load-data-di-datatables.MD

Hal yg wajib di ketahui oleh developer pengguna datatables

case

• kebanyakan orang menggunakan sintak seperti ini

  $result = JadwalPelajaran::with(['mataPelajaran','kelas','pegawai'])
                                    ->where('tahun_akademik_id','=',$post['tahun'] ?? null)
                                    ->where('kelas_id',$post['kelas'] ?? null)
                                    ->groupBy('mata_pelajaran_id')
                                    ->get();

            return DataTables::of($result
                                ->addIndexColumn()
                                ->editColumn('mapel',function($data){
                                    return $data->mataPelajaran->nama;
                                })
                                ->editColumn('kelas',function($data){
                                    return $data->kelas->nama;
                                })
                                ->editColumn('pegawai',function($data){
                                    return $data->pegawai->nama;
                                })
                                ->editColumn('ruangan',function($data){
                                    return $data->kelas->ruangan->nama;
                                })
                                ->addColumn('aksi',function($data) use($post){
                                    return '<a href="'.route("ulangan.list",['tahun' => $post['tahun'], 'kelas' => $post['kelas'], "mapel" => $data->mataPelajaran->id,'guru' => $data->pegawai->id]).'" class="btn btn-outline-info btn-circle btn-sm" title="Lihat"><i class="fas fa-list"></i></a>';
                                })
                            ->rawColumns(['aksi'])
                            ->make(true);

$('#table').DataTable({
        serverSide: true,
        ordering: true,
        autoWidth:false,
        responsive: true,
        processing:true,
        oLanguage: {sProcessing: loading},
        ajax: {
            url: url,
            data: function (d) {
                d.tahun = $('#filter-tahun-akademik').val();
                d.kelas = $('#filter-kelas').val();
            }
        },
        columns: [
            { data: 'DT_RowIndex',name: 'DT_RowIndex', width : '10px' },
            { data: 'mapel',name: 'mapel' },
            { data: 'kelas',name: 'kelas' },
            { data: 'pegawai',name: 'pegawai' },
            { data: 'ruangan', name: 'ruangan'},
            { data: 'aksi', name: 'aksi', ordering: false, width: '50px' },
        ],
        columnDefs: [
            { responsivePriority:1, targets: [0], className: "text-center" },
            { responsivePriority:3, target: 1},
            { responsivePriority:4, target: 2},
            { responsivePriority:2, targets: [5], className: "text-center" },
        ]
    });

ini tidak salah, akan tetapi ini sama sepert menggunakan table biasa, kita anggap data ada 1000, dengan sintak diatas data akan diload 1000 lalu akan ditampilkan per 10 data
Kemampuan DataTables tidak dipakai

• jika kita hilangkan ->get() method ini, setelah kita hilangkan mungkin akan muncul error terutama saat ada data yg berelasi di panggil, ini akan error saat anda melakukan search data pada datatable

Solusi

• disabled column yg tidak perlu di search
• disable column yg berisikan data DT_RowIndex
• jika data memiliki relasi, di column name dan data sesuaikan dengan nama dan fungsi relasinya, contoh pada relasi ini $data->kelas->nama

  ->editColumn('kelas',function($data){
        return $data->kelas->nama;
    })

     columns: [
            .....
            { data: 'kelas',name: 'kelas' },
            .....
        ],

ubah menjadi

  ->editColumn('kelas.nama',function($data){
        return $data->kelas->nama;
    })

     columns: [
            .....
            { data: 'kelas.nama',name: 'kelas.nama' },
            .....
        ],

kenapa demikian, kalian harus menggunakan nama relasi di nama columnya ini berlaku jika kalian tidak menggunakan method ->get()

• hasil akhir seperti ini

$result = JadwalPelajaran::with(['mataPelajaran','kelas','pegawai'])
                                    ->where('tahun_akademik_id','=',$post['tahun'] ?? null)
                                    ->where('kelas_id',$post['kelas'] ?? null)
                                    ->groupBy('mata_pelajaran_id');

            return DataTables::of($result)
                            ->addIndexColumn()
                            ->editColumn('mataPelajaran.nama',function($data){
                                return $data->mataPelajaran->nama;
                            })
                            ->editColumn('kelas.nama',function($data){
                                return $data->kelas->nama;
                            })
                            ->editColumn('pegawai.nama',function($data){
                                return $data->pegawai->nama;
                            })
                            ->editColumn('ruangan',function($data){
                                return $data->kelas->ruangan->nama;
                            })
                            ->addColumn('aksi',function($data) use($post){
                                return '<a href="'.route("ulangan.list",['tahun' => $post['tahun'], 'kelas' => $post['kelas'], "mapel" => $data->mataPelajaran->id,'guru' => $data->pegawai->id]).'" class="btn btn-outline-info btn-circle btn-sm" title="Lihat"><i class="fas fa-list"></i></a>';
                            })
                            ->rawColumns(['aksi'])
                            ->make(true);

let loading = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true">';
    $('#table').DataTable({
        serverSide: true,
        ordering: true,
        autoWidth:false,
        responsive: true,
        processing:true,
        oLanguage: {sProcessing: loading},
        ajax: {
            url: url,
            data: function (d) {
                d.tahun = $('#filter-tahun-akademik').val();
                d.kelas = $('#filter-kelas').val();
            }
        },
        columns: [
            { data: 'DT_RowIndex',name: 'DT_RowIndex', width : '10px', orderable: false, searchable: false },
            { data: 'mataPelajaran.nama',name: 'mataPelajaran.nama' },
            { data: 'kelas.nama',name: 'kelas.nama' },
            { data: 'pegawai.nama',name: 'pegawai.nama' },
            { data: 'ruangan', name: 'ruangan',orderable: false, searchable: false},
            { data: 'aksi', name: 'aksi', ordering: false, width: '50px', orderable: false, searchable: false },
        ],
        columnDefs: [
            { responsivePriority:1, targets: [0], className: "text-center" },
            { responsivePriority:3, target: 1},
            { responsivePriority:4, target: 2},
            { responsivePriority:2, targets: [5], className: "text-center" },
        ]
    });