filtered date doesn't show after edit the column date format - Laravel Yajra Datatable

Question

I use laravel 8 + lumen rest api server and little bit confused because when i consume timestamp and parse it to localize format date on laravel side, also separated the display and timestamp for the js side datatables, the editColumn()it make the filtered search doesn't work because the main of search params is from the timestamp i was set before but on the view i saw it use display side, so how i can make the both filtered(search) and sort work ?

response data :

array:4 [▼
  0 => array:6 [▼
    "id_role" => 1
    "nama_role" => "super.admin"
    "created_at" => "2021-11-02T07:32:00.000000Z"
    "updated_at" => "2021-11-02T07:32:00.000000Z"
    "created_by" => "self"
    "updated_by" => "self"
  ]
  .. => ...
]

the column i was sorted was created_at and updated at.

RoleController.php

<?php
public function index(Request $request)
    {
        $raw = Http::withHeaders(['Authorization' => 'Bearer ' . Cookie::get('access_token')])->get(env('API_URL') . '/v1/kelola-role/role');
        $data = $raw->json('data');
        $status = $raw->json('status');
        if ($request->ajax()) {
            if ($status == 'success') {
                return DataTables::of($data)
                    ->addIndexColumn()
                    ->editColumn('created_at', function ($e) {
                        return [
                            'display' => Carbon::parse($e['created_at'])->format('d/m/Y'),
                            'timestamp' => Carbon::parse($e['created_at'])
                        ];
                    })
                    ->editColumn('updated_at', function ($e) {
                        return [
                            'display' => Carbon::parse($e['updated_at'])->format('d/m/Y'),
                            'timestamp' => Carbon::parse($e['updated_at'])
                        ];
                    })
                    ->make(true);
            }

            return abort(401);
        }
        return view('pages.pengaturan.kelola-role');
    }

the view :

<table class="table" id="dataRole" style="width:100%">
    <thead>
        <tr>
            <th>No</th>
            <th>Nama Role</th>
            <th>Dibuat Pada</th>
            <th>Diupdate Pada</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>No</th>
            <th>Nama Role</th>
            <th>Dibuat Pada</th>
            <th>Diupdate Pada</th>
        </tr>
    </tfoot>
</table>

the js side :

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

        document.addEventListener("DOMContentLoaded", function() {
            $("#dataRole").DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    type: "GET",
                    url: "",
                    dataSrc: function(json) {
                        barDone();
                        return json.data;
                    }
                },
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'nama_role',
                        name: 'nama_role'
                    },
                    {
                        name: 'created_at.timestamp',
                        data: {
                            _: 'created_at.display',
                            sort: 'created_at.timestamp'
                        }
                    },
                    {
                        name: 'updated_at.timestamp',
                        data: {
                            _: 'updated_at.display',
                            sort: 'updated_at.timestamp'
                        }
                    },
                ],
                responsive: true,
                fixedHeader: true,
                select: {
                    style: "multi"
                },
                language: {
                    url: '{{ env('APP_URL') }}/id.json',
                    processing: "<div id='loadercontainer'><div class='d-flex justify-content-center text-secondary' id='loader'><div class='spinner-border' role='status'><span class='sr-only'>Loading...</span></div></div></div>"
                },
                dom: '<"row"<"col-12 col-sm-6 py-0"l><"col-12 col-sm-6 py-0 pt-2 pt-sm-0"fr><"col-12"t><"col-12 d-flex justify-content-between"ip>>',
                render: function(data, type, row, meta) {
                    return meta.row + meta.settings._iDisplayStart + 1;
                },
            });
        });

created_at sort view just work

but when i search it doesn't work

Answer 1

You also need to transform the search on the query level. Try using filterColumn to modify how the package will search on the edited column.

In some cases, we need to implement a custom search for a specific column. To achieve this, you can use filterColumn api.