编辑列日期格式后不显示过滤日期 - Laravel Yajra Datatable

Question

我使用 laravel 8 + lumen rest api 服务器并且有点困惑，因为当我使用 timestamp 并解析它以在 laravel 端本地化格式日期时，还将 display 和 timestamp 分开用于 js 端数据表， editColumn()it 使过滤后的搜索不起作用，因为搜索参数的主要来自我之前设置的时间戳，但在视图中我看到它使用显示端，所以我如何才能同时过滤（搜索）和排序工作？

响应数据：

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"
  ]
  .. => ...
]

我排序的列是 created_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');
    }

观点：

<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>

js端：

       $.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 排序视图正常工作

但是当我搜索时它不起作用

Answer 1

您还需要在查询级别转换搜索。尝试使用filterColumn 修改包在已编辑列上的搜索方式。

在某些情况下，我们需要对特定列实施自定义搜索。为此，您可以使用filterColumn api。