DataTable fixed height
DataTable fixed height
Hi
This pertaining to the pagination feature in datatables
If you see the example illustrated at the following link,
http://datatables.net/release-datatables/examples/basic_init/alt_pagination.html
You will notice that the table contracts while adjusting to the number of rows while moving between 5th and 6th page when showing 10 entries in each page.
This creates as if the table is jumping on the page, imagine a situation where only one row is present on the last page, then the table is reduced to merely a couple of rows.
Is there anyway we can handle this ie keep the table width constant in css px and align accordingly with no of rows??
We have used the bScrollCollapse where the html table height is less than the jquery datatable height and this is consistent for average data sets (say anything above 7 rows) but if the data from the table is one or two rows the height of the table changes drastically as bScrollCollapse tries to readjust the table height.
This feature also affects bfilter setting of jquery datatables , when the data is filtered to smaller sets, the table shrinks drastically
This is undesirable in our case, the user always wants the table to be have a certain height,
The current datatable configuration is
[code] .dataTable({
"bProcessing" : true,
"bDestroy" : true,
"bAutoWidth" : true,
"sScrollY" : "200",
"sScrollX" : "100%",
"bScrollCollapse" : true,
"bSort" : true,
"sPaginationType" : "full_numbers",
"iDisplayLength" : 25,
"bLengthChange" : false
});
[/code]
Thanks in advance
Raj
This pertaining to the pagination feature in datatables
If you see the example illustrated at the following link,
http://datatables.net/release-datatables/examples/basic_init/alt_pagination.html
You will notice that the table contracts while adjusting to the number of rows while moving between 5th and 6th page when showing 10 entries in each page.
This creates as if the table is jumping on the page, imagine a situation where only one row is present on the last page, then the table is reduced to merely a couple of rows.
Is there anyway we can handle this ie keep the table width constant in css px and align accordingly with no of rows??
We have used the bScrollCollapse where the html table height is less than the jquery datatable height and this is consistent for average data sets (say anything above 7 rows) but if the data from the table is one or two rows the height of the table changes drastically as bScrollCollapse tries to readjust the table height.
This feature also affects bfilter setting of jquery datatables , when the data is filtered to smaller sets, the table shrinks drastically
This is undesirable in our case, the user always wants the table to be have a certain height,
The current datatable configuration is
[code] .dataTable({
"bProcessing" : true,
"bDestroy" : true,
"bAutoWidth" : true,
"sScrollY" : "200",
"sScrollX" : "100%",
"bScrollCollapse" : true,
"bSort" : true,
"sPaginationType" : "full_numbers",
"iDisplayLength" : 25,
"bLengthChange" : false
});
[/code]
Thanks in advance
Raj
This discussion has been closed.
Replies
jsFiddle: http://jsfiddle.net/atomofthought/45LuR/
Full Screen: http://jsfiddle.net/atomofthought/45LuR/embedded/result/
I hope this helps.
Regards,
Robert
[code]
div.dataTables_wrapper { min-height: 300px; }
[/code]
to your CSS. I did used to have that in the default CSS for DataTables, but dropped it in 1.9 as there were a lot of questions about how to stop it doing that! I think your own is the first request to have it back :-)
Allan
First of all kudos for making such a wonderful plugin for data tables. It has made a developer's life that much easier.
Coming to the above suggestion, I have the following css in the datatables.css file but that still doesn't seem to fix the height
[code]
.dataTables_wrapper {
position: relative;
clear: both;
width: auto;
min-height : 300 px;
margin-left: 0px;
border-bottom: 1px solid black;
border-top: 1px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
background-color: #9D9C9D;
zoom: 1;
}
[/code]
Is there something i am missing??
Thanks for ur quick reply.
I tried to use the code as is but got an error @
[code] var tableTools = TableTools.fnGetInstance(table); [/code]
Do i need to use the whole function or just the
[code]var $dataTableWrapper = $table.closest(".dataTables_wrapper");
var panelHeight = $dataTableWrapper.parent().height(); [/code]
Plz help...
That is what I expected as well but the table is still readjusting. I mean there has been no effect using it on the auto adjust. The easiest way to look is to type something into the filter/search and the table automatically readjusts
try http://datatables.net/release-datatables/examples/basic_init/scroll_y.html
Robert's example however solves the issue but I am currently unable to replicate his code.
Full Screen: http://jsfiddle.net/atomofthought/45LuR/embedded/result/
The DataTables vertical scrolling example scroll body shrinks vertically when there aren't enough rows.
Raj is saying he wants the scroll body to always be a certain height, regardless of whether or not there are enough rows to make that happen.
@ Raj,
Try adding a reference to the TableTools plugin javascript file.
The line that I thought should not require you to include the TableTools plugin reference is: if (typeof(TableTools) != "undefined") {
I do not get an error.
Here is the script is as it is on jsFiddle.
[code]
var $table = $("#demo table");
$table.dataTable({
"sScrollY": "0px",
"fnDrawCallback": function() {
var $dataTable = $table.dataTable();
$dataTable.fnAdjustColumnSizing(false);
// TableTools
if (typeof(TableTools) != "undefined") {
var tableTools = TableTools.fnGetInstance(table);
if (tableTools != null && tableTools.fnResizeRequired()) {
tableTools.fnResizeButtons();
}
}
//
var $dataTableWrapper = $table.closest(".dataTables_wrapper");
var panelHeight = $dataTableWrapper.parent().height();
var toolbarHeights = 0;
$dataTableWrapper.find(".fg-toolbar").each(function(i, obj) {
toolbarHeights = toolbarHeights + $(obj).height();
});
var scrollHeadHeight = $dataTableWrapper.find(".dataTables_scrollHead").height();
var height = panelHeight - toolbarHeights - scrollHeadHeight;
$dataTableWrapper.find(".dataTables_scrollBody").height(height - 24);
$dataTable._fnScrollDraw();
}
});
[/code]
Everything inside the fnDrawCallback is required. This script comes from another plugin I wrote that resizes a datatable to fit it's parent.
I am still baffled by the line: $dataTableWrapper.find(".dataTables_scrollBody").height(height - 24);
I am not sure why I need to subtract 24 from height. It's a bit of shoehorning, but it seems to work just right.
Robert
Sorry for the delay, I was on vacation this week.
@ Allan : bScrollCollapse works, thanks a ton
There was also one more thing, where can i change the background color of the empty space in the data table. I mean the empty space where there is no data
[code]
div.dataTables_scrollBody {
background-color: red;
}
[/code]
Allan
Currently when i am getting null values/empty/ whitespaces in the column, the borders are disabled. This is affecting the aesthetics of the view.
Where do I need to look to have boundaries around null fields as well
[code]
"fnDrawCallback" : function(oSettings) {
var total_count = oSettings.fnRecordsTotal();
var columns_in_row = $(this).children('thead').children('tr').children('th').length;
var show_num = oSettings._iDisplayLength;
var tr_count = $(this).children('tbody').children('tr').length;
var missing = show_num - tr_count;
if (show_num < total_count && missing > 0){
for(var i = 0; i < missing; i++){
$(this).append(' ');
}
}
if (show_num > total_count) {
for(var i = 0; i < (total_count - tr_count); i++) {
$(this).append(' ');
}
}
}
[/code]