Datatable not responsive

0

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>

}
    
asked by RicardoKra 12.03.2018 в 14:52
source

1 answer

0

You must add the file reference dataTables.responsive.min.js to your project after the jquery.dataTables.js file

jquery.dataTables.min.css

responsive.dataTables.min.css

jquery.dataTables.js

dataTables.responsive.min.js

    
answered by 12.03.2018 / 16:52
source