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

Posted 2023-03-15

【中文标题】编辑列日期格式后不显示过滤日期 - Laravel Yajra Datatable

【英文标题】：filtered date doesn't show after edit the column date format - Laravel Yajra Datatable

【发布时间】：2021-12-21 00:56:10

【问题描述】：

我使用 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 排序视图正常工作

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

【参考方案1】：

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

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

【讨论】：

根据文档filterColumn使用查询/模型，但我使用来自rest api的数据array响应，所以我必须将数据转换为查询级别？并且没有其他方法可以直接使用 yajra 数据表来操作数组过滤器？无论如何感谢您的回答

'Y-m-d' 格式呢？

是的，它仅适用于 'Y-m-d' 和 'Y-m-d H:i:s' 格式，当我尝试另一种格式时，过滤后的搜索仍未显示，包括本地化格式