Bubbling table height. 2 reasons and 2 solutions.

musinik

Just in case if someone will have problems with bubbling table height.
Note: I used "serverside" model, so maybe some things will work in other way if you are not "serverside".

So there might be two general reasons for the problem with height:

1. Small number of rows on last page.
2. Long data in cells.

So, let's go:

1. Small number of rows on last page.

When you filter the data, or when you come to the last page where you often have less records than for a full table, then the table is automatically resized.

I don't know why, but "scrollY" (it's an option to show vertical scrollbar within table container, so that it's size is not changed relatively to the page) stopped the script working for me.

So, another option is to add empty rows up to a regular quantity in case you have less. We can do that with "fnDrawCallback" event which is fired when page is redrawn. See the code: https://jsfiddle.net/9on9qt8p/

2. Long data in cells.

That appeared trickier than I expected.
The solution for me was the following:

• set up as many fixed cell width as you can. For instance you have 10 columns. You fix 8 of them by setting "width": "XXpx" in "columns" options. The rest 2 will divide the width in accordance to the content.
• Insert the cell content into the DIV. We use a standard render function for that. See the code: https://jsfiddle.net/59obzLva/

The DIV has overflow property which allows it to "eat" our long data. The table cell unfortunately can't do that if the table width is not fixed.

Good luck.

allan

I might be a bit thick here, but what do you mean but "bubbling table height"?

Allan

musinik

Maybe my wrong English. I mean that table height is changing when you switch across the table pages. It's either big content or less rows than usual (on a last page).

allan

Ah I see - I think just "table height" would cover it. Thanks for sharing your insights with us! I'm use others will find it useful.

One additional option I would add to the long data option is to use the ellipsis display rendering plug-in I've written for DataTables. I've yet to write a blog post about it (will do soon!) so it isn't that well known, but it can be useful.

Allan

musinik

Aha, nice! Thanks for the information!

musinik

An udate in case you use "info" option and get the message like "no data found" which is placed in the first row.

            var pageSize=10;//oSettings._iDisplayLength;
            this.api().columns().every(function(){

            });
            var len = oSettings.aoData.length;
            if (len<pageSize){
                var check = $(tableId).find(">tbody>tr>td:first-child");
                if(check.size()>0){
                    if (check.hasClass("dataTables_empty")){pageSize--;}                    
                }
                for(i=len;i<pageSize;i++){
                    $(tableId).find(">tbody").append("<tr></tr>");
                }
            }