My first question is about, create a customized column after incoming data
My first question is about, create a customized column after incoming data
mp3man
Posts: 1Questions: 1Answers: 0
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!
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
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 incolumnDefs
. Try moving that to thecolumns
option so you have 8 entries in thecolumns
.Kevin