How to use "select" plugin with Ajax

jstuardo

Hello,

I have this HTML table:

<table id="grd" class="table table-striped table-bordered" style="width:100%">
    <thead>
        <tr>
            <th></th>
            <th>ID</th>
            <th>Nombre</th>
            <th>Dirección</th>
            <th>Fecha Registro</th>
            <th>Fecha Actualización</th>
        </tr>
    </thead>
</table>

And then, this in JavaScript:

$('#grd').DataTable({
"language": {
"url": "//cdn.datatables.net/plug-ins/1.10.19/i18n/Spanish.json"
},
"processing": true,
"serverSide": true,
"ajax": "{{ path('empresa_get_all') }}",
"columns": [
{"data": "id"},
{"data": "id"},
{"data": "nombre"},
{"data": "direccion"},
{"data": "createdAt"},
{"data": "updatedAt"}
],
"order": [[1, "asc"]],
"scrollX": true,
"columnDefs": [ {
orderable: false,
className: 'select-checkbox',
targets: 0
} ],
"select": {
style: 'os',
selector: 'td:first-child'
},
});

I have "select" plugin loaded, of course.

After that execution, in checkbox column the record ID is displayed, instead of the checkbox. When I set an empty value for "data" in columns definition, an error is shown. If I remove the first "data", all columns appear left shifted.

I don't know what else to try.

Regsards
Jaime

kthorngren

I suggest using columns.defaultContent. Maybe something like this:

"columns": [
{
data: null,
defaultContent: '',
orderable: false,
className: 'select-checkbox',
},
{"data": "id"},
{"data": "nombre"},
{"data": "direccion"},
{"data": "createdAt"},
{"data": "updatedAt"}
],

And remove your columnDefs option.

Kevin

jstuardo

I have done it, thanks!

jstuardo

Other more question..... how can I add the checkbox to the header in order to allow all rows selection?

kthorngren

Same question answered here:
https://datatables.net/forums/discussion/52069/how-to-show-checkboxes-to-select-rows-and-to-how-to-show-columns-for-edit-or-delete-records#latest

Kevin