columns error

giorg37

hi,

I'm developing a laravel all for my company.
I have a piece of code that retrieves some data from an external CRM and I want to show it on my datatable this way:

url = '{{ route('get_crm_opportunities') }}';
                $.ajax({
                type: "POST",
                url: url,
                success: function (data) {
                    hideLoader();

                    $('#quantity-modal').hide();
                    $('#opportunities-modal').modal({
                        backdrop: "static",
                        keyboard: false,
                    }).modal('show');

                    data.opportunities.result.forEach(function (value) {
                        let row = '<tr data-date-start="' + value.date_start + '" data-time-start="' + value.time_start + '" data-subject="' + value.subject + '" data-description="' + value.description + '">';
                        row += '<td class="hover">' + value.date_start + '</td><td class="clickable hover">' + value.time_start + '</td><td>' + value.subject + '<br /><small>' + value.description + '</small></td></tr>';
                        $('#opportunities-modal .modal-body table tbody').append(row);
                    });

                    $('#opportunities-dev').DataTable().destroy();
                    setTimeout(function () {
                        $('#opportunities-dev').DataTable({
                            responsive: true,
                            "order": [[0, 'desc']],
                            "oLanguage": {
                                "sUrl": "/js/datatable_it-IT.json"
                            }
                        });
                    }, 500);
                }

In page I have a modal with the table:

<div class="modal fade" role="dialog" id="opportunities-modal">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h2 class="modal-title">{{ __('Opportunities') }}</h2>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <table class="table table-striped w-100" id="opportunities-dev">
                    <thead>
                    <tr>
                        <td style="width: 5%">{{ __('Data') }}</td>
                        <td>{{ __('Ora') }}</td>
                        <td>{{ __('Oggetto') }}</td>
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary close-btn" data-dismiss="modal">{{ __('Close') }}</button>
            </div>
        </div>
    </div>
</div>

the table is showing correctly with the data I want, but if I add the parameter:

"columns": [
                                { "width": "20%" },
                            ],

it doesn't work and I see in the console: Uncaught TypeError: ea is undefined as if the columns are not defined in the right way.

Any idea?
Thanks a lot

P.S. if u wonder why I needed a timeout, is because otherwise the responsive version is not working

colin

Did you mean to usecolumns like that? That's saying there's just a single column in the data. You may want to use columnDefs if you want to change the width of a specific column.

Colin