DataTable Header Issue on a Wizard plugin

jimboy

I have this datatable header issue if it is on a responsive layout.

The header only breaks if I set dom: 'frltip', scrollX: true and if the datatable is under a Wizard panel which is jQuery Smart Wizard.

You can see the demo here fiddler http://jsfiddle.net/UvjnT/2274/ , the datatable is on step-2 of the wizard.

Any help is much appreciated.

allan

dom: 'frltip',

Don't use that dom string with Bootstrap styling. Bootstrap needs a more complex value, since it uses a grid system. The documentation for dom shows the default used for Bootstrap, which you can modify as you need.

Allan

jimboy

Hi Allan,

I define the the dom with bootstrap styling below but all of the control elements are on the top.

                $('#datatable').dataTable({
                   
             dom: '<"top"><"bottom"flp><"clear">', scrollX: true
                
        });

My aim was to put on top the "dataTables_filter" (aligned left) and "dataTables_length" (aligned right), which works using dom: frltip with a little css help (text-align), while at the bottom are the info (aligned left) and paging (aligned right).

Also, another issue on small screens where the filter and length overlaps each other.

Thanks,

jimboy

I tried this one but still the header is not aligned with the columns.

$('.dataTables_scrollHeadInner, .dataTables_scrollHeadInner table').width("100%");

Any thoughts?

Thanks,

allan

Still don't use the dom option like that. The documentation shows that this is the default for Bootstrap:

"<'row'<'col-sm-6'l><'col-sm-6'f>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-5'i><'col-sm-7'p>>",

Yours should look similar.

What is it about the default that you want to change?

Allan

jimboy

Thanks Allan, it works!