Geek Answers Handbook

How to make jquery datatable use bootstrap table-responsive class?

I have a jquery datatable, and I know that there is a “responsive” plugin for it, but I don’t like the behavior, the same as the class responsible for loading the table.

I should be able to just wrap my jquery datatable in a div with this class, but that doesn't seem to work for me. I basically want the table to scroll through the horizontal area when it was too big.

I tried wrapping the table in a div that didn't work.

I tried setting a div class that is generated from a datatable, which also has no effect.

For those of you who are not familiar, bootstrap responds to tables (see here): http://getbootstrap.com/css/#tables-responsive

Jquery datatables responsive plugin reduces the table to plus / minus (very elegant in some cases, but not mine) https://datatables.net/extensions/responsive/

+4
source share
1 answer

Try adding a container <div class="table-responsive"></div>after initializing the table, see the code example below:

$('#example').DataTable({
    "initComplete": function(settings, json){
        $('#example').wrap('<div class="table-responsive"></div>');
    }
});

The reason <div class="table-responsive">does not work, because it <table>must be a direct child <div class="table-responsive">, but DataTables changes the hierarchy and styles are no longer applied.

Alternatively, there is the scrollX option , which seems to do the same.

$('#example').DataTable({
    'scrollX': true
});

See this JSFiddle for a demo.

+2
source

More articles:


All Articles