Datatables with table-responsive and FixedHeader

blackninja

Hello guys, that's my code:
$(document).ready(function() { var table = $('#example').DataTable( { ...ajax call and bla bla..., "initComplete": function(settings, json){ $('#example').wrap('<div class="table-responsive"></div>'); new $.fn.dataTable.FixedHeader( table ); }, } );
I'm using datatables with table-responsive class + fixedheader, I'm calling data with ajax and so for this reason i need to use:
"initComplete": function(settings, json){ $('#example').wrap('<div class="table-responsive"></div>'); }
To inject table-responsive in the table
Then here's the problem
new $.fn.dataTable.FixedHeader( table );
FixedHeader doesn't work good because table-responsive is called subsequently with injection, and it can't adapt to the table-responsive, FixedHeader works like the table-responsive just doesn't exist and broke it

Sorry for my english and for my bad code skills.
I'm learning both

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

blackninja

Thanks Colin.
Here the test case: http://live.datatables.net/tozihuwo/1/edit

If you scroll down you can see the table-responsive bar. The fixedheader doesn't adapt to it, because, I suppose, #example is without table-responsive but wrapped with table-responsive.

edit:
I need to improve the test case.

kthorngren

I fixed the test case for you. You left the original datatbles.js and datatables.css from the http://live.datatables.net/ environment. Plus your ajax response contains objects so I added columns.data.
http://live.datatables.net/tozihuwo/2/edit

I see you are wanting to use Bootstrap's responsive table not Datatables responsive extension. This thread is asking the same question. See Allan's response.

Kevin

blackninja

@kthorngren thanks for your amazing job. The point is that if you use
$('#example').addClass('table-responsive');
Instead of:
$('#example').wrap('<div class="table-responsive"></div>');
table-responsive and fidexheader will work fine together. But in that case I will broke that part of table-responsive where you can resize the window and table-responsive can readjust the table.

I mean we're so near to the solution

blackninja

I don't know how but it works now!
"initComplete": function(settings, json){ $('#example').addClass('table-responsive'); $('.table-responsive').css({ width: '100%', }); new $.fn.dataTable.FixedHeader( table ); },