Version Data Table 1.10.18
Version Responsive 2.2.6
•••••••••••Debugger code (debug.datatables.net):
JS file
let w;
var dt = $('#dt-table').DataTable({
ajax: {
type: 'GET',
responsive: true,
url: '/data/',
dataSrc: (data) => {
w = data.w;
return data.data;
}
},
columnDefs: [
{ targets: 0,
className: 'control', // tried without it
render: function ( data, type, row, meta ) {
return row.i;
},
},
{ targets: 1,
render: function ( data, type, row, meta ) {
return row.typ;
}
},
{ targets: 2,
render: function ( data, type, row, meta ) {
return row.dea;
}
},
{ targets: 3,
render: function ( data, type, row, meta ) {
return row.in;
}
},
{ targets: 4,
render: function ( data, type, row, meta ) {
return row.rat;
}
},
{ targets: 5,
render: function ( data, type, row, meta ) {
return row.se;
},
},
{ targets: 6,
render: function ( data, type, row, meta ) {
return row.cerm;
}
},
{ targets: 7,
render: function ( data, type, row, meta ) {
return row.ter;
}
},
{ targets: 8,
render: function ( data, type, row, meta ) {
return row.av
},
},
{ targets: 9,
render: function ( data, type, row, meta ) {
return row.acr
},
},
],
order: [ [ 0, "asc" ]],
autoWidth: false,
stateSave: false,
dom:
"<'row '<'col-12 text-left pdb-3x'i><'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'f>>" +
"<t>" +
"<'row align-items-center'<'col-6 text-left'p>>",
paging: true,
lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
pageLength: -1,
language: {
"search": "",
"searchPlaceholder": "Type in to Search",
"lengthMenu": "Show _MENU_ Data",
"info": "Showing _START_ to _END_ of _TOTAL_ Data",
"infoEmpty": "Showing 0 to 0 of 0 Data",
"infoFiltered": "(filtered from _MAX_ total Data)",
"paginate": {
"first": "First",
"last": "Last",
"next": "Next",
"previous": "Prev"
},
},
});
```
Parameters I passed in the responsive key other than true, next object:
```
{
details: {
type: 'column',
target: 0 // tried also with 1 and 2
},
breakpoints: [
{name: 'bigdesktop', width: Infinity},
{name: 'meddesktop', width: 1480},
{name: 'smalldesktop', width: 1280},
{name: 'medium', width: 1188},
{name: 'tabletl', width: 1024},
{name: 'btwtabllandp', width: 848},
{name: 'tabletp', width: 768},
{name: 'mobilel', width: 480},
{name: 'mobilep', width: 320}
]
}
```
HTML FIle
<table id="dt-table class="table table-bordered table-hover" style="width:100%;">
<thead>
<tr>
<th class="dt-i text-left text-secundary">
I
</th>
<th class="dt-typ">
Typ
</th>
<th class="dt-dea">
Dea
</th>
<th class="dt-in">
In
</th>
<th class="dt-rat">
Rat
</th>
<th class="dt-se">
Security
</th>
<th class="dt-cerm">
Cerm
</th>
<th class="dt-ter">
Ter
</th>
<th class="dt-av">
Av
</th>
<th class="dt-ac"></th>
</tr>
</thead>
</table>
```
Error messages shown: No error message
Description of problem: When used a ajax call to insert the data into the table the responsiveness doesn't work, but when it's done by initializing the datatable after, it does work... for my project I required to do it all through ajax..