Yajra 数据表 - 调整大小以响应显示后羽毛图标消失

Question

调整大小以响应显示时，羽毛图标（显示、编辑[眼睛]和删除）消失。

我很努力地想解决这个问题，但我做不到。请问有人帮忙吗？

这是代码：

在控制器中：

            return Datatables::of($persons_addresses)
            ->addIndexColumn()
            ->editColumn('main', function($persons_addresses){
                $main = $persons_addresses->main;
                if ($main === 0) {
                    return '<span class="badge bg-light-warning">Normal</span>';
                } elseif ($main === 1){
                    return '<span class="badge bg-light-success">Principal</span>';
                }
            })
            ->editColumn('state', function($persons_addresses){
                $state = $persons_addresses->stateAddressPerson->abbr;
                return $state;
            })
            ->editColumn('city', function($persons_addresses){
                $city = $persons_addresses->cityAddressPerson->name;
                return $city;
            })
            ->editColumn('zipcode', function($persons_addresses){
                $zipcode = $persons_addresses->zipcode;
                $zipcode_render = substr($zipcode, 0, 2) . '.' . substr($zipcode, 2, 3) . '-' . substr($zipcode, 5, 3);
                return $zipcode_render;
            })
            ->addColumn('action', function($persons_addresses){
                return '
                <button class="btn btn-sm btn-icon showAddressPersonBtn" data-toggle="modal" data-target="#showAddressPersonModal" value="'.$persons_addresses->id.'"><i data-feather="eye" class="font-small-4 me-50"></i></button>
                <button class="btn btn-sm btn-icon editAddressPersonBtn" data-toggle="modal" data-target="#editAddressPersonModal" value="'.$persons_addresses->id.'"><i data-feather="edit" class="font-small-4 me-50"></i></button>
                <button class="btn btn-sm btn-icon deleteAddressPersonBtn" value="'.$persons_addresses->id.'"><i data-feather="trash" class="font-small-4 me-50"></i></button>';
            })
            ->rawColumns(['action','main'])
            ->make(true);
        }

在 Java 脚本中：

            $(function () {

                'use strict';

                $("#tablePersonAddresses").DataTable({
                    "processing": true,
                    "serverSide": true,
                    "ajax": $("#addressesPersonsFetch").attr('data-fetch-route'),
                    "filter": true,
                    "columns":[
                        {"data": "id", "name": "id"},
                        {"data": "main", "name": "main", orderable:true},
                        {"data": "address", "name" : "address"},
                        {"data": "state", "name" : "state"},
                        {"data": "city", "name" : "city"},
                        {"data": "zipcode", "name" : "zipcode"},
                        {"data": "action", orderable:false, searchble:false}
                    ],
                    "order": [[ 1, 'asc' ]],
                    "drawCallback": function( settings ) {
                        feather.replace();
                    },
                    columnDefs: [
                        {
                            targets: 0,
                            visible: false
                        },
                        { className: 'text-center', targets: [1, 2, 3, 4, 5, 6] },
                        { className: 'middle', targets: [1, 2, 3, 4, 5, 6] }
                    ],
                    "responsive": true,
                    "bDeferRender": true,
                    "lengthMenu": [
                        [3, 5, -1],
                        [3, 4, "Todos"]
                    ],
                    dom:
                    '<"d-flex justify-content-between align-items-center header-actions text-nowrap mx-1 row mt-75"' +
                    '<"col-sm-12 col-lg-4 d-flex justify-content-center justify-content-lg-start" l>' +
                    '<"col-sm-12 col-lg-8"<"dt-action-buttons d-flex align-items-center justify-content-lg-end justify-content-center flex-md-nowrap flex-wrap"<"me-1"f><"user_role mt-50 width-200 me-1">B>>' +
                    '><"text-nowrap" t>' +
                    '<"d-flex justify-content-between mx-2 row mb-1"' +
                    '<"col-sm-12 col-md-6"i>' +
                    '<"col-sm-12 col-md-6"p>' +
                    '>',
                    language:
                    {
                        url: "{{asset('data/locales/datatable-pt-BR.json')}}",
                        sLengthMenu: 'Mostrar _MENU_',
                        search: 'Pesquisar',
                        searchPlaceholder: 'Pesquisar..'
                    },
                    buttons:
                    [{
                        text: "Adicionar Endereço",
                        className: 'add-new btn btn-primary mt-50',
                        attr:
                        {
                            'data-bs-toggle': 'modal',
                            'data-bs-target': '#addPersonAddressModal'
                        },
                        init: function (api, node, config)
                        {
                            $(node).removeClass('btn-secondary');
                        }
                    }],
                    "autoWidth": false,
                }).buttons().container().appendTo('#tablePersonAddresses .col-md-6:eq(0)');

                // Filter form control to default size
                // ? setTimeout used for multilingual table initialization
                setTimeout(() => {
                    $('.dataTables_filter .form-control').removeClass('form-control-sm');
                    $('.dataTables_length .form-select').removeClass('form-select-sm');
                }, 300);

            });

正常显示 这是正常显示并出现图标。一切都好。

响应式显示 但是，当显示响应式调整大小时，图标会消失。

这就是问题所在。

Answer 1

我遇到了同样的问题，这段代码对我有用：

$('.data-table tbody').on('click', 'tr td', function() {
    feather.replace();
});

Answer 2

我就是这样用的，对我有用

"use strict";
(function ($) {
    function applyFeatherIcons() {
        feather.replace();
    }

    // Initialize DataTable with event callback
    var table = $('.data-table').DataTable({
        processing: true,
        serverSide: true,
        ajax: "{{ route($module . '.index') }}",
        columns: [
            {data: 'id', name: 'id'},
            {data: 'type', name: 'type'},
            {data: 'key', name: 'key'},
            {data: 'name', name: 'name'},
            {data: 'actions', name: 'actions', orderable: false, searchable: false},
        ],
        drawCallback: function() {
            // Call the applyFeatherIcons function when the table is drawn (e.g., during pagination)
            applyFeatherIcons();
        }
    });

    // Initial application of feather icons
    applyFeatherIcons();
})(jQuery);