implementasi datatable serverside

controller.php

<?php
use Yajra\DataTables\DataTables;

class TerminalController extends Controller
{
        public function index(Request $request)
        {
        if ($request->ajax()) {
            $data = Terminal::join('provinsi', 'terminal.id_provinsi', 'provinsi.id_provinsi')
                ->join('kabupaten', 'terminal.id_kabupaten', 'kabupaten.id_kabupaten')
                ->select('terminal.id_terminal', 'terminal.tipe', 'terminal.nama_terminal', 'terminal.created_at', 'provinsi.nama as prov', 'kabupaten.nama as kab')
                ->orderBy('terminal.nama_terminal', 'ASC');

            return DataTables::of($data)
                ->addIndexColumn()
                ->addColumn('tanggal', function ($data) {
                    return Carbon::parse($data->created_at)->translatedFormat('d M Y');
                })
                ->addColumn('aksi', function ($data) {
                    $btn = '<div class="d-flex">';
                    $btn .= '<button type="button" class="btn btn-primary mr-1 edit" data-id="' . $data->id_terminal . '">Edit</button>';
                    $btn .= '<button type="button" class="btn btn-danger ml-1 delete" data-id="' . $data->id_terminal . '">Hapus</button>';
                    $btn .= '</div>';
                    return $btn;
                })
                ->rawColumns(['aksi'])
                ->make(true);
        }
        $provinsi = ProvinsiModel::all();
        return view('admin.terminal.index', compact('provinsi'));
        }
}

view.html

@extends('admin.layouts.app')
@section('title', 'Data Terminal')
@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12 col-md-12">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">Data Terminal</h4>
                    <button type="button" class="btn btn-primary my-4" data-toggle="modal" data-target="#addNew">Tambah
                        Terminal</button>
                    <div class="table-responsive">
                        <table id="data_karyawan" class="table table-striped table-bordered" style="width: 100%;">
                            <thead>
                                <tr>
                                    <th width="5%">No</th>
                                    <th width="20%">Nama</th>
                                    <th width="5%">Tipe</th>
                                    <th width="20%">Provinsi</th>
                                    <th width="20%">Kabupaten</th>
                                    <th width="15%">Dibuat pada</th>
                                    <th width="10%">Aksi</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- sample modal content -->
<div id="addNew" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="addNewLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header d-flex align-items-center">
                <h4 class="modal-title" id="addNewLabel">Tambah Terminal</h4>
                <button type="button" class="close ml-auto" data-dismiss="modal" aria-hidden="true">×</button>
            </div>
            {{ Form::open(['id' => 'formTerminal']) }}
            <div class="modal-body">
                <div class="form-group">
                    <label for="emailaddress">Nama Terminal</label>
                    {{ Form::text('nama', null, ['class' => 'form-control']) }}
                </div>
                <div class="form-group">
                    <label for="tipe">Tipe</label>
                    {{ Form::select('tipe', ['A' => 'A', 'B' => 'B', 'C' => 'C'], null, ['placeholder' => 'Pilih Tipe', 'class' => 'form-control custom-select', 'style' => 'width: 100%']) }}
                </div>
                <div class="form-group">
                    <label for="provinsi">Provinsi</label>
                    {{ Form::select('provinsi', $provinsi->pluck('nama', 'id_provinsi'), null, ['placeholder' => 'Pilih Provinsi', 'class' => 'form-control custom-select', 'style' => 'width: 100%']) }}
                </div>
                <div class="form-group">
                    <label for="kabupaten">Kabupaten / Kota</label>
                    {{ Form::select('kabupaten', [], null, ['placeholder' => 'Pilih Kota / Kabupaten', 'class' => 'form-control custom-select', 'style' => 'width: 100%']) }}
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                {{ Form::submit('Simpan', ['class' => 'btn btn-primary']) }}
            </div>
            {{ Form::close() }}
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<!-- sample modal content -->
<div id="editModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header d-flex align-items-center">
                <h4 class="modal-title" id="editModalLabel">Edit Data Terminal</h4>
                <button type="button" class="close ml-auto" data-dismiss="modal" aria-hidden="true">×</button>
            </div>
            {{ Form::open(['id' => 'formEditTerminal']) }}
            {{ Form::hidden('id_terminal', null) }}
            <div class="modal-body">
                <div class="form-group">
                    <label for="emailaddress">Nama Terminal</label>
                    {{ Form::text('nama', null, ['class' => 'form-control']) }}
                </div>
                <div class="form-group">
                    <label for="tipe">Tipe</label>
                    {{ Form::select('tipe', ['A' => 'A', 'B' => 'B', 'C' => 'C'], null, ['placeholder' => 'Pilih Tipe', 'class' => 'form-control custom-select', 'style' => 'width: 100%']) }}
                </div>
                <div class="form-group">
                    <label for="provinsi">Provinsi</label>
                    {{ Form::select('provinsi', $provinsi->pluck('nama', 'id_provinsi'), null, ['placeholder' => 'Pilih Provinsi', 'class' => 'form-control custom-select', 'style' => 'width: 100%']) }}
                </div>
                <div class="form-group">
                    <label for="kabupaten">Kabupaten / Kota</label>
                    {{ Form::select('kabupaten', [], null, ['placeholder' => 'Pilih Kota / Kabupaten', 'class' => 'form-control custom-select', 'style' => 'width: 100%']) }}
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                {{ Form::submit('Simpan', ['class' => 'btn btn-primary']) }}
            </div>
            {{ Form::close() }}
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
<script src="{{ asset('dash/libs/datatables/media/js/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('dash/js/pages/datatable/custom-datatable.js') }}"></script>
<script>
    $(document).ready(function(){
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        $('select[name="provinsi"]').on('change', function(){
            $.ajax({
                url: "{{ route('admin.terminal.getKabupaten') }}",
                data: {
                    'provinsi' : $(this).val()
                },
                type: "POST",
                success: function(data) {
                    let html = '';
                    html += '<option>Pilih Kota / Kabupaten</option>';
                    $.each(data, function(i, v){
                        html += '<option value="' + v.id_kabupaten + '">' + v.nama + '</option>';
                    });
                    $('select[name="kabupaten"]').html(html);
                }
            })
        });
        var table = $('#data_karyawan').DataTable({
            "oLanguage": {
                "oPaginate": {
                    "sPrevious": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>',
                    "sNext": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>'
                },
                "sInfo": "Halaman _PAGE_ dari _PAGES_",
                "sSearch": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>',
                "sSearchPlaceholder": "Cari...",
                "sLengthMenu": "Tampilkan :  _MENU_",
            },
            "stripeClasses": [],
            "lengthMenu": [10, 20, 30],
            "pageLength": 10,
            processing: true,
            serverSide: true,
            ajax: {
                url: "{{ route('admin.terminal') }}",
                type: "GET",
            },
            columns: [
                { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false },
                { data: 'nama_terminal', name: 'nama_terminal' },
                { data: 'tipe', name: 'tipe' },
                { data: 'prov', name: 'prov' },
                { data: 'kab', name: 'kab' },
                { data: 'tanggal', name: 'tanggal' },
                { data: 'aksi', name: 'aksi' },
            ]
        });
        $('#formTerminal').submit(function(e){
            e.preventDefault();
            let data = $(this).serialize();
            $.ajax({
                type: "POST",
                url: "{{ route('admin.terminal.store') }}",
                data: data,
                success: function(data) {
                    $('#addNew').modal('hide');
                    $("#data_karyawan").DataTable().ajax.reload();
                    Swal.fire({
                        title: 'Berhasil!',
                        text: 'Berhasil menambahkan data terminal',
                        icon: 'success',
                        confirmButtonText: 'OK'
                    });
                    $('#formTerminal').trigger("reset");
                }
            });
        });
        // edit
        $('body').on('click', '.edit', function(){
            let id_term = $(this).data('id');
            $('#editModal').modal('show');
            $.ajax({
                type: "POST",
                url: "{{ route('admin.terminal.edit') }}",
                data: {
                    'id_terminal' : id_term
                },
                success: function(data) {
                    $('input[name="id_terminal"]').val(id_term);
                    $('input[name="nama"]').val(data.nama_terminal);
                    $('select[name="tipe"] option[value="'+data.tipe+'"]').prop('selected', true);
                    $('select[name="provinsi"] option[value="'+data.id_provinsi+'"]').prop('selected', true);
                    $('select[name="provinsi"]').trigger('change');
                    setTimeout(function(){
                        $('select[name="kabupaten"] option[value="'+data.id_kabupaten+'"]').prop('selected', true);
                    }, 1000);
                }
            });
        });
        // update
        $('#formEditTerminal').submit(function(e){
            e.preventDefault();
            let data = $(this).serialize();
            $.ajax({
                type: "POST",
                url: "{{ route('admin.terminal.update') }}",
                data: data,
                success: function(r){
                    $('#editModal').modal('hide');
                    $("#data_karyawan").DataTable().ajax.reload();
                    $('#formEditTerminal').trigger("reset");
                }
            })
        });
        // delete
        $('body').on('click', '.delete', function(){
            var id_del = $(this).data('id');
            Swal.fire({
                title: 'Yakin menghapus data ini?',
                text: "Klik hapus untuk melanjutkan!",
                type: 'warning',
                showCancelButton: true,
                cancelButtonText: 'Batal',
                confirmButtonText: 'Hapus',
                padding: '2em'
            }).then(function(result) {
                if (result.value) {
                    $.ajax({
                        type: "DELETE",
                        url: "/admin/master/terminal/delete/"+id_del,
                        success: function () {
                            $("#data_karyawan").DataTable().ajax.reload();
                        }
                    });
                }
            });
        });
        $('#editModal'). on('hidden.bs.modal', function () {
            $('#formTerminal')[0].reset();
        });
    })
</script>
@endsection