How can I show more than 1 row in responsive view of Datatables.net?

user_5872989 0
Viewed 240

This is my table in desktop mode :

In responsive or mobile view ,only user can view country name without click on + button at now,but I want to show (name,buy price,sell price) without click on + button and when user clicked on + button show the user other columns (date,chart,country name).
how can i do this with tables of datatables.net?

datatables html-table jquery
1 Answers

Doc:

https://datatables.net/extensions/responsive/examples/column-control/columnPriority.html

So, you have to use responsivePriority in columnDefs propertly in your DataTable constructor:

$(document).ready(function() {
    $('#example').DataTable( {
        responsive: true,
        columnDefs: [
            { responsivePriority: 1, targets: 1 }, // name
            { responsivePriority: 2, targets: 2 }, // buy price
            { responsivePriority: 3, targets: 3 }, // sell price
            { responsivePriority: 4, targets: 0 },
            { responsivePriority: 5, targets: 4 },
            { responsivePriority: 6, targets: 5 }
        ]
    } );
} );

EDIT:

Ok, this is more complicated so... First, use this for fixed columns: How to fixed the last column of a responsive DataTable and then use row_details plugin (you have to fill de data inside each row by iterating the current row): https://datatables.net/examples/api/row_details.html

user_70988060
Related