Estoy tratando de hacer responsive una Datatable que recibe datos de servidor siguiendo el ejemplo de: https://coderexample.com/datatable-responsive-server-side/
Pero no veo que la tabla se convierta en responsive. No aparecen los botones + y mucho menos despliegan las columnas no visibles como el ejemplo.
Creo que pueda ser por que uso
fnServerData
pero no estoy seguro. ¿Como podría darle el aspecto responsive?
Aquí va el codigo:
{
$(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>
}