Laravel Datatables

CustomerController.php

<?php

class CustomerController extends Controller
{
    //
    public function index(Request $request)
    {
        $request->validate([
            'period' => 'required|string|date_format:Y-m',
            'status' => 'nullable|numeric',
            'coverage_id' => 'nullable|string|ulid|exists:coverages,id',
            'packet_id' => 'nullable|string|ulid|exists:packets,id',
        ]);

        $start = $request->input('start');
        $length = $request->input('length');
        $search = $request->input('search.value');
        $orderColumn = $request->input('order.0.column');
        $orderDir = $request->input('order.0.dir');

        $period = $request->is_year == 1 ? date('Y', strtotime($request->period)) : date('Y-m', strtotime($request->period));

        $status = is_numeric($request->status) ? $request->status : null;
        $coverage_id = $request->coverage_id ?: null;
        $packet_id = $request->packet_id ?: null;


        $orderColumnIndex = ['code', 'place_name', 'status', 'total_amount', 'bill',];
        $orderColumn = $columns[$orderColumnIndex] ?? 'created_at';

        $baseQuery = $request->is_year == 1
            ? Customer::whereYear('created_at', $period)
            : Customer::whereRaw("to_char(created_at, 'YYYY-MM') = '{$period}'");

        $recordsTotal = $baseQuery->count();

        $baseQuery
            ->when($coverage_id, function (Builder $builder, string $coverage_id) {
                $builder->where('coverage_id', $coverage_id);
            })
            ->when($packet_id, function (Builder $builder, string $packet_id) {
                $builder->where('packet_id', $packet_id);
            })
            ->when($status, function (Builder $builder, int $status) {
                $builder->where('status', $status);
            })
            ->when($search, function (Builder $builder, string $search) {
                $builder
                    ->where('code', 'ilike', "%{$search}%")
                    ->orWhere('place_name', 'ilike', "%{$search}%")
                    ->orWhereRelation('profile', 'name', 'ilike', "%{$search}%");
            });

        $recordsFiltered = $baseQuery->count();

        $data = $baseQuery
            ->orderBy($orderColumn, $orderDir)
            ->offset($start)
            ->limit($length)
            ->with(['sales', 'network', 'profile'])
            ->get()
            ->map(function ($row) {
                $row->status_color = $row->statusColor;
                $row->status_text = $row->statusText;
                $row->bill_text = $row->billText;
                $row->total_amount = $row->totalAmountCurrency;

                return $row;
            });

        return response()->json([
            // 'draw' => intval($request->input('draw')),
            'recordsTotal' => $recordsTotal,
            'recordsFiltered' => $recordsFiltered,
            'data' => $data,
        ]);
    }
}

index.blade.php

<table class="table" id="tableData">
    <thead>
        <tr>
            <th scope="col">Code</th>
            <th scope="col">Place Name</th>
            <th scope="col">Status</th>
            <th scope="col">Bill</th>
            <th scope="col">Total Amount</th>
            <th scope="col" style="width: 150px; text-align: center">Action</th>
        </tr>
    </thead>

    <tbody>
        <!-- content -->
    </tbody>
</table>

index.js

$(document).ready(function () {
    $.ajaxSetup({
        headers: {
            "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
        },
    });

    const _table = $("#tableData").DataTable({
        searchDelay: 500,
        responsive: true,
        serverSide: true,
        processing: true,
        ajax: {
            url: _.HOST_REST,
            data: function (d) {
                d.is_year = $("#is_year").is(":checked") ? 1 : 0;
                d.period = $("#period").val();
                d.status = $("#status").val();
                d.coverage_id = $("#coverage_id").val();
                d.packet_id = $("#packet_id").val();
            },
            error: function (xhr, error, thrown) {
                $(".dataTables_processing").hide();

                const { status, statusText, responseText, responseJSON } = xhr;

                switch (status) {
                    case 422:
                        const errors = responseJSON.errors;

                        $.each(errors, function (index, value) {
                            $("<li/>")
                                .text(value[0])
                                .appendTo("#listMessageError");
                        });

                        $("#showMessageError").show();
                        break;

                    case 419:
                    case 404:
                        Swal.fire(statusText, responseJSON.message, "warning");
                        break;

                    case 500:
                        Swal.fire(statusText, responseJSON.message, "error");
                        break;

                    default:
                        break;
                }
            },
        },
        columns: [
            {
                data: "code",
                className: "text-nowrap",
                render: function (data, type, row, meta) {
                    let _network = "";

                    if (row.network) {
                        _network = `<span class="label label-danger label-inline font-weight-normal mr-2">${row.network.auth_username}</span>`;
                    }

                    return `<div class="d-flex align-items-center">
                        <div class="ml-4">
                            <div class="text-dark-75 font-weight-bolder font-size-lg mb-0"> ${data} </div>
                            ${_network}
                        </div>
                    </div>`;
                },
            },
            {
                data: "place_name",
                render: function (data, type, row, meta) {
                    return `<div class="d-flex flex-column">
                        <div class="font-weight-bolder">
                            ${row.profile.name}
                        </div>
                        <div>
                            <em>${data}</em>
                        </div>

                        <span class="label label-primary label-inline font-weight-normal mr-2">${row.sales.name}</span>
                    </div>`;
                },
            },
            {
                data: "status",
                render: function (data, type, row, meta) {
                    return `<strong class="text-${row.status_color}">${row.status_text}</strong>`;
                },
            },
            { data: "bill", render: (data, type, row, meta) => row.bill_text },
            {
                data: "total_amount",
                className: "text-nowrap font-weight-bolder",
            },
            {
                data: "id",
                render: function (data, type, row, meta) {
                    let _show = _.HOST_PAGE + "/" + data;
                    let _edit = _.HOST_PAGE + "/" + data + "/edit";

                    return row.status == 0
                        ? `${btnShow(_show)} ${btnEdit(_edit)} ${btnDelete(
                              data
                          )}`
                        : `${btnShow(_show)} ${btnEdit(_edit)}`;
                },
            },
        ],
    });

    $(document).on("click", ".btnDelete", function (e) {
        e.preventDefault();

        let _tr = $(this).parents("tr");
        let _id = $(this).val();

        const _url = _.HOST_PAGE + "/" + _id;
        const _params = {
            id: _id,
        };

        deleteRow(_url, _params, () => {
            _table.row(_tr).remove().draw();
        });
    });
});