Fixed header and dynamic width
Fixed header and dynamic width
bennmeyers
Posts: 1Questions: 0Answers: 0
I have a table that requires a fluid width. I've managed to get all internals to stretch but datatables is giving me issues. I like the search/sort features associated with it, but I would like to let one cell stretch dynamically to fill the blank space. I've tried re-initializing the table, but it doesn't solve the issue. I have a few needs:
Keep the functionality datatables provides (searching, sorting, etc)
fix the header (I used "bAutoWidth": false, "sScrollY": 300, and if I remember, "bScrollCollapse": true)
allow the table to horizontally stretch (which usually requires "bAutoWidth": true)
Extra credit: sScrollY should also be dynamic
[code]
$('#table_id').dataTable({
"bAutoWidth": false,
"bLengthChange": false,
"bSortClasses": false,
"bFilter": true,
"bPaginate":false,
"bInfo":true,
"sPaginationType": "full_numbers",
"oLanguage": {
"sSearch": "Filter records:",
"sInfo": "Total: _TOTAL_ datasets"
},
"sScrollY": 300,
"bScrollCollapse": true,
"sDom": "ilfrtp",
"aaSorting": [[0, "asc"]],
"aoColumns": [
{ "sWidth" : "220px" },
null,
{ "sWidth" : "132px" },
{ "sWidth" : "132px" },
{ "sWidth" : "88px" },
{ "sWidth" : "88px" }
]
});
[/code]
Keep the functionality datatables provides (searching, sorting, etc)
fix the header (I used "bAutoWidth": false, "sScrollY": 300, and if I remember, "bScrollCollapse": true)
allow the table to horizontally stretch (which usually requires "bAutoWidth": true)
Extra credit: sScrollY should also be dynamic
[code]
$('#table_id').dataTable({
"bAutoWidth": false,
"bLengthChange": false,
"bSortClasses": false,
"bFilter": true,
"bPaginate":false,
"bInfo":true,
"sPaginationType": "full_numbers",
"oLanguage": {
"sSearch": "Filter records:",
"sInfo": "Total: _TOTAL_ datasets"
},
"sScrollY": 300,
"bScrollCollapse": true,
"sDom": "ilfrtp",
"aaSorting": [[0, "asc"]],
"aoColumns": [
{ "sWidth" : "220px" },
null,
{ "sWidth" : "132px" },
{ "sWidth" : "132px" },
{ "sWidth" : "88px" },
{ "sWidth" : "88px" }
]
});
[/code]
This discussion has been closed.