My first question is about, create a customized column after incoming data

mp3man

Hi all, this is my first post, so lets go!
I have a table with next header data:

<table id="table_id_customers" class="table table-striped table-bordered" style="width:100%">
        <thead>
        <tr>
            <th>Nombre</th>
            <th>Apellido paterno</th>
            <th>Apellido materno</th>
            <th>Contract Tier</th>
            <th>Relation Code</th>
            <th>Activo/Cancelado</th>
            <th>Registrado</th>
            <th data-name="buttonUpdate">Upd</th>
        </tr>
        </thead>
    </table>

The last row, should display a customized button, and my jscode is the next:

let table = $('#table_id_customers').DataTable({
                //serverSide: true,
                ajax: "{{ url('customer/list') }}",
                dataSrc: '',
                columns: [
                    { data: 'name' },
                    { data: 'last_name1' },
                    { data: 'last_name2' },
                    { data: 'contract_tier' },
                    { data: 'relation_code' },
                    { data: 'disabled',
                      render: function(data, type, row) {
                          return (data == '0') ? '<span class="text-default">Activo</span>' : '<span class="text-danger font-weight-bold">Cancelado</span>';
                      }
                    },
                    { data: 'drs_id_user',
                      render: function(data, type, row) {
                          return (data === null) ? '<span class="text-danger font-weight-bold">No</span>' : '<span class="text-default">Si</span>';
                      }
                    },

                ],
                columnDefs: [
                    { targets: 7,
                        //data: null,
                        //data: 'id',
                        createdCell: function(td, cellData, rowData, row, col) {
                            $(td).append($('<button>', {type: 'button', class:'btn-sm btn btn-danger'}).data('id', rowData.id).text('Actualizar'));
                        }
                    },
                ]
            });

What I'm doing wrong? I get an alert every time I refresh page.
Thanks,

Dani from Barcelona, be careful with coronavirus!

kthorngren

I get an alert every time I refresh page.

What is the alert?

You have 8 columns in the HTML table but only define 7 in columns. Looks like the 8th column you are trying to define in columnDefs. Try moving that to the columns option so you have 8 entries in the columns.

Kevin