Responsive table not working in an AJAX table
Responsive table not working in an AJAX table
Studiosi
Posts: 1Questions: 1Answers: 0
I have a completely functional table that loads the data from an AJAX source. The table works perfectly. The problem comes now, when I added the "responsive" add-on. I can't configure it, it just does not eliminate columns as desired to make it fit.
This is the script
<script>
$(document).ready(function() {
$('#userList').dataTable( {
processing: true,
serverSide: true,
ajax: {
url: "xxx",
type : "POST"
},
lengthChange: false,
language: {
url: "/js/finnish.json"
},
columns: [
{
data: "xxx"
},
{
data: "xxx"
},
{
data: "xxx"
},
{
data: "xxx"
},
{
data: "xxx"
},
{
data: "xxx"
},
{
data: "a_1",
searchable: false,
orderable: false,
render: function ( data, type, row ) {
return '<a href="' + data + '">Edit</a>' ;
}
},
{
data: "a_2",
searchable: false,
orderable: false,
render: function ( data, type, row ) {
return '<a href="' + data + '">Delete</a>' ;
}
}
]
});
});
</script>
And this is the markup for the table itself
<table id="userList" class="display responsive" cellspacing="0" width="100%">
<thead>
<tr>
<th data-priority="1">xxx</th>
<th data-priority="1">xxx</th>
<th data-priority="1">xxx</th>
<th data-priority="1">xxx</th>
<th data-priority="1">xxx</th>
<th data-priority="1">xxx</th>
<th data-priority="1"></th>
<th data-priority="1"></th>
</tr>
</thead>
<tfoot>
<tr>
<th data-priority="1">xxx</th>
<th data-priority="1">xxx</th>
<th data-priority="1">xxx</th>
<th data-priority="1">xxx</th>
<th data-priority="1">xxx</th>
<th data-priority="1">xxxt</th>
<th data-priority="1"></th>
<th data-priority="1"></th>
</tr>
</tfoot>
</table>
Any idea of what may be happening? The table is working, it just does not become responsive. Thanks in advance!
This discussion has been closed.