I am trying to make responsive a Datatable that receives server data following the example of: link
But I do not see that the table becomes responsive. The + buttons do not appear, much less display the non-visible columns like the example.
I think it might be because I use
fnServerData
but I'm not sure. How could I give it a responsive look?
Here's the code:
{
$(document).ready(function() {
$('#mytable').dataTable({
responsive: {
details: {
renderer: function ( api, rowIdx ) {
var data = api.cells( rowIdx, ':hidden' ).eq(0).map( function ( cell ) {
var header = $( api.column( cell.column ).header() );
return '<p style="color:#00A">'+header.text()+' : '+api.cell( cell ).data()+'</p>'; // changing details mark up.
} ).toArray().join('');
return data ? $('<table/>').append( data ) : false;
}
}
},
processing: true,
serverSide: true,
"sAjaxSource": "<?= site_url('admin/cp/ob_usu') ?>",
"fnServerData": function(sSource, aoData, fnCallback) {
aoData.push({"name": "txt_b", "value": $('#txt_b').val()});
aoData.push({"name": "t_cli", "value": $('#t_cli').val()});
aoData.push({"name": "s_cr", "value": $('#s_cr').val()});
$.ajax({
"dataType": 'json',
"url": sSource,
"data": aoData,
"success": fnCallback
});
},
"oLanguage": {
"sLengthMenu": "Mostrando _MENU_ reg por pag",
"sZeroRecords": "Sin datos",
"sInfo": "Mostrando de _START_ a _END_ de _TOTAL_ reg",
"sInfoEmpty": "Mostrando 0 a 0 de 0 registros",
"sInfoFiltered": "(filtrando de _MAX_ registros totales)"
},
bStateSave: true,
});
<div class="table-responsive">
<table id="mytable" class="table table-striped table-bordered table-hover">
...
</table>
</div>
}