Yajra Datatables响应式切换后Feather图标消失求助

页面正常显示时，操作列的Feather图标（查看、编辑、删除）能正常展示；但切换到响应式显示后，图标会消失。

相关代码 #

控制器代码 #

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

JavaScript代码 #

$(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(() => {
        $('.dataTables_filter .form-control').removeClass('form-control-sm');
        $('.dataTables_length .form-select').removeClass('form-select-sm');
    }, 300);

});

问题原因 #

DataTables的响应式模式切换视图时，会将隐藏列的内容重新渲染到详情面板中。当前仅在drawCallback中调用feather.replace()，这个回调只在表格初始绘制、分页、排序等操作时触发，不会响应响应式的展开/收起事件，导致新生成的<i data-feather="xxx">标签没有被Feather替换为SVG图标。

解决方案 #

在DataTables初始化完成后，添加监听responsive-display事件的代码，每次响应式视图变化时重新调用feather.replace()：

修改后的完整JavaScript代码：

$(function () {

    'use strict';

    const table = $("#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)');

    // 新增：监听响应式显示事件，重新渲染Feather图标
    $('#tablePersonAddresses').on('responsive-display.dt', function(e, datatable, row, showHide, update) {
        feather.replace();
    });

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

});

修改后，无论是表格初始绘制，还是响应式模式下展开/收起详情面板，Feather图标都会被正确渲染。

内容的提问来源于stack exchange，提问作者Fabiano Lopes