I'm attempting to use the pager and tablesort plugins on a table.
Initially I got everything working with just the sorting, then once
that was working, I added pagination with tablesorterPater. This is
where things started really going awry.
When the page loads, the table is trimmed to 10 rows, like it should
be, but the pager's text input is blank, it doesn't show what page of
how many pages there are. Further, if you click on a table header to
sort the table, all the rows in the table disappear, and the pager's
text input will read 1/NaN
In firefox, I'm getting 0 JS errors.
In the head of my document, the JS is loaded like this:
jquery.1.3.2.min.js
jquery.tablesorter.js (problem exists with jquery.tablesorter.min.js
as well)
jquery.tablesorter.pager.js
Then I load my script, which puts jQuery into no conflict mode and
applies tablesorter and pager. For posterity:
jQuery.noConflict();
jQuery(document).ready(function($){
$('table.updates__sortable')
.tablesorter()
.tablesorterPager(
{
container: $('#updates__pager'),
cssNext: '.updates__next',
cssPrev: '.updates__prev',
cssFirst: '.updates__first',
cssLast: '.updates__last',
cssPageDisplay: '.updates__pagedisplay',
cssPageSize: '.updates__pagesize',
positionFixed: false
}
);
});
Since the site is on an intranet, I can't give you a URL to go to. I
can tell you that I'm using this within DokuWiki (hence the
noConflict), and I haven't tried it outside of DokuWiki yet, so I'm
not 100% sure it's not something in DokuWiki causing the conflict. I'm
welcome to any ideas.
Oh, table markup looks like:
snip
<table class="inline updates__sortable" id="sortable">
<thead class="__updates-thead">
<tr class="row0 odd">
<th class="col0
__updates-id">ID</th>
<th class="col1 __updates-title">Title</th>
<th class="col2 __updates-modified">Modified</th>
<th class="col3 __updates-description">Description</th>
</tr>
</thead>
<tbody class="__updates-tbody">
<tr class="row1 even">
<td class="cols0 __updates-id""><a
href=/dokuwiki/pnp/michael
class="__updates-page-link">michael</a></td>
<td class="cols1 __updates-modified"">2009/09/10
19:09</td>
<td class="cols2 __updates-title"">michael</td>
<td class="cols3
__updates-description"">michael…</td>
</tr>
<tr class="row2 odd">
<td class="cols0 __updates-id""><a
href=/dokuwiki/pnp/laura
class="__updates-page-link">laura</a></td>
<td class="cols1 __updates-modified"">2009/09/10
19:09</td>
<td class="cols2 __updates-title"">laura</td>
<td class="cols3
__updates-description"">laura…</td>
</tr>
</tbody>
</table>
<div id="updates__pager" class="updates__pager">
<form>
<img src="first.png" class="updates__first"/>
<img src="prev.png" class="updates__prev"/>
<input type="text" class="updates__pagedisplay"/>
<img src="next.png" class="updates__next"/>
<img src="last.png" class="updates__last"/>
<select class="updates__pagesize">
<option selected="selected" value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
</select>
</form>
</div>
/snip
