After spending a considerable amount of time on this issue...
<div id="pager" style="top: 5px; position: relative; " class="pager" >
<form>
<img src="http://tablesorter.com/addons/pager/icons/first.png" alt="first" class="first"/>
<img src="http://tablesorter.com/addons/pager/icons/prev.png" alt="prev" class="prev"/>
<input type="text" class="pagedisplay"/>
<img src="http://tablesorter.com/addons/pager/icons/next.png" alt="next" class="next"/>
<img src="http://tablesorter.com/addons/pager/icons/last.png" alt="last" class="last"/>
<select class="pagesize">
<option selected="selected" value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
<option value="50">50</option>
</select>
</form>
</div>
Upon inspecting the source code of the loaded page, I noticed a discrepancy:
<div id="pager" style="top: 494px; position: absolute; " class="pager">The structure of the table is pretty standard and falls within <div id="main">
<table id="runResults" class="tablesorter">I haven't defined any CSS styles specifically for Pager or any div elements in general.
This pagination plugin for my site's table has proven to be frustrating. It doesn't adjust properly when there are an odd number of entries not divisible by 10, causing it to extend off the page significantly with just 1 or 2 leftover items.
Is there a way to ensure that the pager div aligns correctly with the table?
UPDATE: When changing the options in the "pagesize" dropdown, the table resizes accordingly and the div adjusts as expected. However, if I navigate to the last page (with 2 extra items) without resizing, the div remains misplaced. How can I fix this issue?
UPDATE2: Investigating the jQuery pager plugin I was using, I discovered this piece of code:
function fixPosition(table) {
var c = table.config;
if (!c.pagerPositionSet && c.positionFixed) {
var c = table.config, o = $(table);
if (o.offset) {
c.container.css({
top: o.offset().top + o.height() + 'px',
position: 'absolute'
});
}
c.pagerPositionSet = true;
}
}
It appears that jQuery was setting a specific position for the div's container. By modifying
top: o.offset().top + o.height() + 'px',
position: 'absolute'
to
top: '5px',
position: 'relative'