Der Mann mit Wein
Grünschnabel
Hallo, ich habe ein Problem mit dem Tablesorter plugin für jquery(http://tablesorter.com/docs/index.html) und dem pager-plugin dafür. Ich habe mir eine tabelle erstellt und in die lade ich per ajax meine datensätze hinein.
Das funktioniert auch alles wunderbar. Doch ich würde auch gern das pager plugin dazu verwenden, da ich sehr viele Datensätze habe. Doch sobald ich dann meine seite neulade entählt die tabelle immer noch 20 einträge. Sobald ich aber auf eine Tabellenkopfzeile zum sortieren klicken sind auf einmal nur noch 10 Zeilen in der Tabelle, durchblättern kann ich aber trotzdem nicht durch die restlichen einträge.
Hier einmal der Sourcecode der relevanten element:
Ich habe jetzt schon einige Zeit auf google und im Firebug mit debuggen verbracht. Doch leider verstehe ich nicht genug von javascript um alleine zu kapieren was hier schief läuft.
Das funktioniert auch alles wunderbar. Doch ich würde auch gern das pager plugin dazu verwenden, da ich sehr viele Datensätze habe. Doch sobald ich dann meine seite neulade entählt die tabelle immer noch 20 einträge. Sobald ich aber auf eine Tabellenkopfzeile zum sortieren klicken sind auf einmal nur noch 10 Zeilen in der Tabelle, durchblättern kann ich aber trotzdem nicht durch die restlichen einträge.
Hier einmal der Sourcecode der relevanten element:
HTML:
<table class="tablesorter" id="data" >
<thead>
<tr>
<th>Messwert</th>
<th>Zeitstempel</th>
<th>Oberer Grenzwert</th>
<th>Unterer Grenzwert</th>
<th>Oberer Warnwert</th>
<th>Unterer Warnwert</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div class="pager" id="pager" style="top: 613px; position: absolute;">
<form>
<img class="first" src="images/first.png">
<img class="prev" src="images/prev.png">
<input type="text" class="pagedisplay">
<img class="next" src="images/next.png">
<img class="last" src="images/last.png">
<select class="pagesize">
<option value="10" >10</option>
<option value="20" selected="selected">20</option>
<option value="30">30</option>
<option value="40">40</option>
</select>
</form>
</div>
Code:
$('#data').tablesorter({headers: { 1: { sorter: "isoDate"}},widthFixed: true});
$.ajax({
type: "GET",
url: "DataServlet",
data: "value=temp",
success: function(msg){
$("table tbody").append(msg);
$("table").trigger("update");
$("table").tablesorterPager({container:$("#pager")});
},
error: function (xmlHttpRequest, textStatus, errorThrown) {
if(xmlHttpRequest.readyState == 0 || xmlHttpRequest.status == 0){
return; // it's not really an error
}
else
alert("error");
}
});
Ich habe jetzt schon einige Zeit auf google und im Firebug mit debuggen verbracht. Doch leider verstehe ich nicht genug von javascript um alleine zu kapieren was hier schief läuft.