sScrollY with "bPaginate": true messes up column widths in 1.9.4
sScrollY with "bPaginate": true messes up column widths in 1.9.4
mcgrevy
Posts: 35Questions: 0Answers: 0
Hi,
I saw a post where you said you had fixed this for 1.9.4 (which I am using) but can't find it again, hence new discussion.
I am using DataTables with Twitter Bootstrap and wish to have fixed headings with print pdf, csv etc buttons (I have found no other way except through Bootstrap to get these).
If I have "bPaginate": false widths are fine but no pagination (expected). With "bPaginate": true get pagination but messed up widths. (The header and detail do not agree)
I have tried as per code and with "bAutoWidth":true, and no "bLengthChange":.
This seems like a conflict between DataTables and Bootstrap. This happens in FF and Opera
BTW I tried to use the debug tool but was told that jquery not loaded but it is (checked in FireBug)
Here is the code and with "bAutoWidth":true, without "bLengthChange", same result
<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN' 'http://www.w3.org/TR/html4/strict.dtd'>
DataTables example
$(document).ready( function () {
var oTable = $('#example').dataTable( {
"sDom": "<'row-fluid'<'span6'lT><'span6'f>r>t<'row-fluid'<'span12'pi>>",
"sPaginationType": "bootstrap",
"sWrapper": "dataTables_wrapper form-inline",
"iDisplayLength": 10,
"aLengthMenu": [[10, 20, 40, -1], [10, 20, 40, "All"]],
//"sPaginationType": "full-numbers",
"bScrollCollapse":true,
"sScrollY": "230px",
//"bPaginate": false,
"bInfo": true,
"bAutoWidth":false,
"bLengthChange": true,
"aoColumns": [
{ "bSortable": false,
"sWidth": "10px"},
{ "bSortable": false,
"sWidth": "90px"},
{ "bSortable": true,
"sWidth": "300px"},
{ "bSortable": true,
"sWidth": "200px"},
{ "bSortable": true,
"sWidth": "100px"},
{ "bSortable": true,
"sWidth": "200px"},
],
} );
} );
<!-- It seems that the only way to control table width is here -->
ID
Actions
Company
Surname
Name
Email
12234
Nampak Tissue (Pty) Ltd
Bowen
Claire
claire.bowen@za.nampak.com
**** lots more rows ****
I saw a post where you said you had fixed this for 1.9.4 (which I am using) but can't find it again, hence new discussion.
I am using DataTables with Twitter Bootstrap and wish to have fixed headings with print pdf, csv etc buttons (I have found no other way except through Bootstrap to get these).
If I have "bPaginate": false widths are fine but no pagination (expected). With "bPaginate": true get pagination but messed up widths. (The header and detail do not agree)
I have tried as per code and with "bAutoWidth":true, and no "bLengthChange":.
This seems like a conflict between DataTables and Bootstrap. This happens in FF and Opera
BTW I tried to use the debug tool but was told that jquery not loaded but it is (checked in FireBug)
Here is the code and with "bAutoWidth":true, without "bLengthChange", same result
<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN' 'http://www.w3.org/TR/html4/strict.dtd'>
DataTables example
$(document).ready( function () {
var oTable = $('#example').dataTable( {
"sDom": "<'row-fluid'<'span6'lT><'span6'f>r>t<'row-fluid'<'span12'pi>>",
"sPaginationType": "bootstrap",
"sWrapper": "dataTables_wrapper form-inline",
"iDisplayLength": 10,
"aLengthMenu": [[10, 20, 40, -1], [10, 20, 40, "All"]],
//"sPaginationType": "full-numbers",
"bScrollCollapse":true,
"sScrollY": "230px",
//"bPaginate": false,
"bInfo": true,
"bAutoWidth":false,
"bLengthChange": true,
"aoColumns": [
{ "bSortable": false,
"sWidth": "10px"},
{ "bSortable": false,
"sWidth": "90px"},
{ "bSortable": true,
"sWidth": "300px"},
{ "bSortable": true,
"sWidth": "200px"},
{ "bSortable": true,
"sWidth": "100px"},
{ "bSortable": true,
"sWidth": "200px"},
],
} );
} );
<!-- It seems that the only way to control table width is here -->
ID
Actions
Company
Surname
Name
12234
Nampak Tissue (Pty) Ltd
Bowen
Claire
claire.bowen@za.nampak.com
**** lots more rows ****
This discussion has been closed.