Tijden veranderen
Tablesorter
Ik heb een pagina waar ik een tablesorter op los laat. Werkt gewoon prima, tot ik via een ajaxrequest bepaalde tabellen later in wil laden.
Die tabellen sorteren allemaal niet, iemand enig idee hoe dat kan?
Chi Lion op 02/07/2012 13:14:13:
iemand enig idee hoe dat kan?
Ja zeker.
Als je met ajax een div (of iets anders) vult met extra HTML-elementen, zijn die elementen niet gebonden aan de events / triggers.
Die events bind je bij
$(document).ready
Twee mogelijke oplossingen:
1) na het invoegen van nieuwe elementen, laat je nog eens de triggers los op je pagina.
2) Er zijn events die gebonden kunnen worden, ook voor elementen die er nog niet zijn. Dit kan bv. met .live() ( http://api.jquery.com/live/ )
----------
Toon eens het javascript gedeelte waar je nieuw materiaal in de tabel zet
Gewijzigd op 02/07/2012 13:27:52 door Kris Peeters
Code (php)
1
2
3
2
3
$('table').on('click', 'td', function() {
// do something
});
// do something
});
Dit vuurt een onclick event af op de table en kijkt dan of je op een td hebt geklikt, is dat zo => callback aanroepen, is dat niet zo => doe niks.
Meer informatie: http://api.jquery.com/on/
Quote:
Allereerst, ik kan geen andere versie van jQuery gebruiken 1.5.1 gebruiken we hier en dat moet zo blijven. Helaas.
AJAX request:
Tablesorter data:
In de ipStats.php geef ik een tabel het volgende mee:
AJAX request:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script type="text/javascript">
$('#clickIp').click(function() {
$('#loading').show('slow', function() {
$.post("http://10.65.2.21/marketing/new/ipStats.php", function(data) {
$("#ipStats").html(data);
$('#ipStats').show('slow', function() {
$('#browserStats').hide('slow', function() {
$('#mainOverview').hide('slow', function() {
$('#loading').hide('slow', function() {});
});
});
});
});
})});
</script>
$('#clickIp').click(function() {
$('#loading').show('slow', function() {
$.post("http://10.65.2.21/marketing/new/ipStats.php", function(data) {
$("#ipStats").html(data);
$('#ipStats').show('slow', function() {
$('#browserStats').hide('slow', function() {
$('#mainOverview').hide('slow', function() {
$('#loading').hide('slow', function() {});
});
});
});
});
})});
</script>
Tablesorter data:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
$(document).ready(function()
{
$("#mainTable").tablesorter();
$("#browserTable").tablesorter();
$("#ipTable").tablesorter();
$("#browserTotalTable").tablesorter();
}
);
</script>
$(document).ready(function()
{
$("#mainTable").tablesorter();
$("#browserTable").tablesorter();
$("#ipTable").tablesorter();
$("#browserTotalTable").tablesorter();
}
);
</script>
In de ipStats.php geef ik een tabel het volgende mee:
Code (php)
1
<table id="ipTable">
Toevoeging op 02/07/2012 13:44:04:
EDIT:
Ik heb de document ready eruit gehaald, nu sorteert hij wel.
Echter, ik heb nog een probleem...
Hij sorteert niet goed bij bedragen met een punt & komma erin.
Code (php)
1
2
3
4
5
2
3
4
5
OrderId Amount
1939292794 91,55
1939257486 9.424,56
1939395016 62.865,16
1939265667 60,48
1939292794 91,55
1939257486 9.424,56
1939395016 62.865,16
1939265667 60,48
Bijvoorbeeld bovenstaande.
Gewijzigd op 02/07/2012 13:44:38 door John Cena
Ik veronderstel de jQuery-ui tablesorter.
Je doet iets als
Code (php)
1
2
3
4
2
3
4
$(document).ready(function() {
$("#myTable").tablesorter();
}
);
$("#myTable").tablesorter();
}
);
Je spreekt nergens zelf click events aan; de plugin regelt alles.
Waarschijnlijk is mijn eerste oplossing hier het meest gemakkelijke.
Dus, bij je Ajax respons callback:
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
...
success: function (data) {
$('#mijn_element').html(data) // geen idee wat je precies waarin steekt
// en hier nog eens de tablesorter triggeren
$("#myTable").tablesorter();
}
success: function (data) {
$('#mijn_element').html(data) // geen idee wat je precies waarin steekt
// en hier nog eens de tablesorter triggeren
$("#myTable").tablesorter();
}
Gewijzigd op 02/07/2012 14:04:02 door Kris Peeters
Echter, ik heb nog een probleem...
Hij sorteert niet goed bij bedragen met een punt & komma erin.
Code (php)
1
2
3
4
5
2
3
4
5
OrderId Amount
1939292794 91,55
1939257486 9.424,56
1939395016 62.865,16
1939265667 60,48
1939292794 91,55
1939257486 9.424,56
1939395016 62.865,16
1939265667 60,48
Bijvoorbeeld bovenstaande.
Om te beginnen ... vaan waar komen die gegevens? Database? Waren er geen formaat-eisen aan dat veld bij het ingeven, ...
Voor een gelijkaardig probleem (toen ging het om datum formaat) heb ik eens iets uitgetest; dat werkte perfect:
Een onzichtbare kolom met de gegevens zoals een computer ze graag heeft, naast de kolom geformatteerd zoals een mens het graag leest.
Bij een klik op de <th>, kaapte ik die click en ik stuurde ze door naar de <th> van de onzichtbare kolom, zo werd alles goed gesorteerd.
Gewijzigd op 02/07/2012 14:19:22 door Kris Peeters
Jou idee staat me wel aan, maar hoe ga ik dat doen? Neem aan dat ik dan in de source van de tablesorter kan gaan hacken?
Zie:
http://www.phphulp.nl/php/forum/topic/jquery-tablesorter-laten-sorteren-op-een-datum/76967/last/
Gewijzigd op 02/07/2012 14:24:44 door Kris Peeters