In my angularjs application, I'm displaying a "main table" on (nearly) every page. This table has thousands of logical rows, but only a few physical rows (so it's fast avoiding huge DOM overhead).
The number of physical rows is data-independent (I display them even when there are no logical rows). I implemented scrolling of the table and I want it to exactly fit in the window, so that no scrolling of the page is necessary.
For this, I need is to know how many rows do fit. The height of every row is fixed (using
height: 20px !IMPORTANT
var t = $("main-table");
var extraHeight = $(window).height - t.position().top - t.height() - someReserve;
var extraRows = Math.floor(extraHeight) / normalRowHeight);
physicalRows.length += extraRows;
physicalRows.length = 10
10 -> 33 -> 31 -> 30 -> 30 (done)
10 -> 33 -> 56 -> 36 -> 31 -> 30 -> 30 (done)
10 -> 33 -> 56
If I understand correctly :
main-tablefrom a base array of
main-tablebased on the new array (am I correct ?)
If this is indeed the process, you can avoid the looping part, by not using
table.height in your formula :
// no extraHeight : get the full height available for your table var height = $(window).height - t.position().top - someReserve; // no extraRows : get the full rowCount var rowCount = Math.floor(extraHeight) / normalRowHeight); // if you want to display at least 10 rows : rowCount = Math.max(rowCount, 10); // no adding to existing size : set the correct size physicalRows.length = rowCount;
Since this computation does not depend on the table height, you know for sure the value will not change when you update the rows of your table.
The second thing is the height of a row : the height attribute does not take into account border width or padding, so the actual height of a row in your table will be higher than just your cell's height attribute.
See for example : https://jsfiddle.net/1sm3oct1/
even with a
height: 20px !important attribute on the table's cells, the actual height looks more like
Play around with the css and click "Run" to see the actual's table height.
You can try to find through testing the actual size for your rows :
// testing several pages show that the table's rows are 5px larger than // height in css : var normalRowHeight = 20 + 5;
or use the existing table to figure out the height for one of its row :
var normalRowHeight = t.height() / physicalRows.length;
You can also look at he following SO question : How to fix height of TR ?