DataTable fixed height

rajgumma

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

robertbrower

I have solved this problem by resizing the datatable. You can see it in action here:

jsFiddle: http://jsfiddle.net/atomofthought/45LuR/
Full Screen: http://jsfiddle.net/atomofthought/45LuR/embedded/result/

I hope this helps.

Regards,

Robert

allan

You could add something like:

[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

rajgumma

Hi Alan

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??

robertbrower

Sometimes under certain circumstances, width and height can be a real pain. Have you tried my suggestion?

allan

That should fix the height of the container. Is that not what you wanted?

rajgumma

Hi Robert,

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...

rajgumma

@ Allan

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/

robertbrower

@Allan,

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

allan

Still not 100% certain I get it :-). If you don't what the table to shrink, then don't include `"bScrollCollapse" : true` . http://live.datatables.net/ukiyek/edit#javascript,html ?

robertbrower

Is the datatable inside a container that is getting resized?

rajgumma

Hi,
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

allan

In your CSS would do:

[code]
div.dataTables_scrollBody {
background-color: red;
}
[/code]

Allan

rajgumma

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

rockstar

Try this code for last page fixed height...

[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]