How to have a fully responsive table?

JujuPomme

Hey,

I've a datable with 4 columns and so many rows.
When I launch it on my mobile phone, it's not fully responsive, the datatables pluggin's width is too high for a mobile resolution.

How can I obtain a fully responsive datatable?

Example, if the screen resolution is too small, one column can be in the opening/closing details.

Here is my actual datable :

$('a#_action_datatable').click(function() {
    var table = $('#example').DataTable( {
        "language": {
            "lengthMenu": "Voir _MENU_ enregistrements par page",
            "sInfo": "Résultat des _START_ sur _END_ enregistrement sur un total de _TOTAL_",
            "sSearch": "Rechercher"
        },
        "ajax": "_send_actions_in_json.php",
        "paging": true,
        "responsive": true,
        "retrieve": true,
        "columns": [
            {
                "className":      'details-control',
                "orderable":      false,
                "data":           null,
                "defaultContent": ''
            },
            { "data": "NOM" },
            { "data": "TYPE" },
            { "data": "DESTINATAIRE" },
            { "data": "DATE_PREVU" }
        ],
        "order": [[3, 'desc']]
    } );

     // Add event listener for opening and closing details
     $('table#example').off('click', 'td.details-control');
     $('table#example').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = table.row( tr );
            if ( row.child.isShown() ) {
                // This row is already open - close it
                row.child.hide();
                tr.removeClass('shown');
            }
            else {
                // Open this row
                row.child( format(row.data()) ).show();
                tr.addClass('shown');
                }
        } );
    });

Thanks !

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

Thanks for your question - however, per the forum rules can you link to a test case showing the issue please. This will allow the issue to be debugged.

Information on how to create a test page, if you can't provide a link to your own page can be found here.

Thanks,
Allan

JujuPomme

I can't give you a test case and i don't know why, it's a really simple problem...

When the screen is too small, i just want add a column in the details-control (you're datatable example with the +/- to see details)

JujuPomme

https://datatables.net/extensions/responsive/examples/styling/bootstrap.html

That's what I need, but there isn't the code. Do you have it Allan?

allan

I'm not sure what you mean by there isn't the code in that page. The initialisation used on that page is shown under the table. It shows the files to include (or use the download builder) and then initialise the table with the responsive option or use dt-responsive for the table's class name, like in that example.

See also the manual which details this.

Allan

edit: You have responsive in your code above, so it should be enabling Responsive (assuming it is loaded). Thus we come back to needing a test case to understand why it isn't working, since, as you can see in the example you linked to, it does work there.

JujuPomme

Hey Allan,

I'm working on it.
But, How can I access to the $.fn variables?

allan

I'm afraid I don't understand the question. $ is typically jQuery. So to access $.fn you would just use $.fn like any other Javascript variable.

Allan

JujuPomme

Ok, i miss my question.

How can i access to $.fn.dataTable.Responsive, this constructor for example?

JujuPomme

Ok, sorry I found.

How can I manage the show/hide rows when the screen is too small?

Rgds

allan

How can I manage the show/hide rows when the screen is too small?

Use Responsive. If that isn't working for you, I would need a link to a test page showing the issue, as requested twice above.