0

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>

}
1

1 respuesta 1

0

Debes agregar a tu proyecto la referencia del archivo dataTables.responsive.min.js después del archivo jquery.dataTables.js

jquery.dataTables.min.css

responsive.dataTables.min.css

jquery.dataTables.js

dataTables.responsive.min.js

1
  • Si, esas clases son necesarias. Aparte noté que la tabla necesita clases especificas: <table class="display nowrap dataTable dtr-inline no-footer collapsed">
    – RicardoKra
    Commented el 13 mar. 2018 a las 8:10

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.