[jQuery] TableSorter laten sorteren op een datum
Kan iemand mij helpen met deze brandende vraag?
Ik heb de TableSorter voor in jQuery, maar ik heb er een vraagje over:
In mijn tabel heb ik de datums als volgt staan:
30 Apr 2011
2 Jun 2011 t/m 5 Mar 2011
13 Aug 2011
10 May 2011 t/m 10 Jun 2011
Maar het punt is, als hij sorteert, dan sorteert hij op alfabet (cijfers), en dat dat hoort niet.
Is er iets misschien iets mogelijk dat ik hem wel goed kan laten sorteren op zulke datums?
Enig idee beste kijkbuisvrienden?
Ik denk dat je je eigen parser moet schrijven.
Ik zal eens kijken of ik hem wat aan kan leren. Maar eerst duik ik mijn nest in.
Thnx...
Uiteraard display:none; op die kolom..
Kan dit wel? Of heb ik een biertje verdient omdat ik een te gekke feature voor de maker van TableSorter dacht heb?
Mja, een parser schrijven lijkt me wat handiger....
Mijn eerste gedachte...
kaap de event handler van de "human readable" kolom
voeg zelf een event handler toe die een click op de onzichtbare kolom aanroept.
Ik zal eens proberen
Ik heb een valse hoofding gemaakt. Een copy van de <tr> met de <th>'s, maar dan met <td>'s.
Wanneer op zo'n valse header wordt geklikt, trigger ik een click naar de echte th onder die kolom. Behalve bij de datum, daar trigger ik een klik op de verborgen th van de verborgen kolom die naast de human readable datum kolom staat.
Haal het commentaar van /* display: none; */ (lijn 33) weg om het uiteindelijk effect te zien
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
<head>
<title>jQuery plugin: Tablesorter 2.0</title>
<script type="text/javascript" src="jquery-latest.js"></script>
<script type="text/javascript" src="jquery.tablesorter.js"></script>
<script>
$(document).ready(function() {
$("#myTable").tablesorter();
$('#myTable .dummy_head').click(function(e) {
switch ($(e.target).html()) {
case 'Last Name':
$($("#myTable th")[0]).click();
case 'First Name':
$($("#myTable th")[1]).click();
case 'Email':
$($("#myTable th")[2]).click();
case 'Registerd': // hier gaan we dus doen alsof geklikt is op de kolom er naast
$($("#myTable th")[4]).click();
}
});
}
);
</script>
<style>
#myTable .dummy_head {
font-weight: bold;
cursor: pointer;
}
#myTable th, #myTable .hidden_date{
color: #aaaaaa;
/* display: none; */
}
</style>
</head>
<body>
<table id="myTable" class="tablesorter" border="1">
<thead>
<tr class="dummy_head">
<td>Last Name</td>
<td>First Name</td>
<td>Email</td>
<td>Registerd</td>
<td class="hidden_date">Registerd hidden</td>
</tr>
<tr>
<th>Last Name</th>
<th>First Name</th>
<th>Email</th>
<th>Registerd</th>
<th class="hidden_date">Registerd hidden</th>
</tr>
</thead>
<tbody>
<tr>
<td>Smith</td>
<td>John</td>
<td>[email protected]</td>
<td>10 May 2011</td>
<td class="hidden_date">2011-05-10</td>
</tr>
<tr>
<td>Bach</td>
<td>Frank</td>
<td>[email protected]</td>
<td>30 Apr 2011 </td>
<td class="hidden_date">2011-04-30</td>
</tr>
<tr>
<td>Doe</td>
<td>Jason</td>
<td>[email protected]</td>
<td>2 Jun 2011</td>
<td class="hidden_date">2011-06-02</td>
</tr>
<tr>
<td>Conway</td>
<td>Tim</td>
<td>[email protected]</td>
<td>13 Aug 2011</td>
<td class="hidden_date">2011-08-13</td>
</tr>
</tbody>
</table>
</body>
</html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
<head>
<title>jQuery plugin: Tablesorter 2.0</title>
<script type="text/javascript" src="jquery-latest.js"></script>
<script type="text/javascript" src="jquery.tablesorter.js"></script>
<script>
$(document).ready(function() {
$("#myTable").tablesorter();
$('#myTable .dummy_head').click(function(e) {
switch ($(e.target).html()) {
case 'Last Name':
$($("#myTable th")[0]).click();
case 'First Name':
$($("#myTable th")[1]).click();
case 'Email':
$($("#myTable th")[2]).click();
case 'Registerd': // hier gaan we dus doen alsof geklikt is op de kolom er naast
$($("#myTable th")[4]).click();
}
});
}
);
</script>
<style>
#myTable .dummy_head {
font-weight: bold;
cursor: pointer;
}
#myTable th, #myTable .hidden_date{
color: #aaaaaa;
/* display: none; */
}
</style>
</head>
<body>
<table id="myTable" class="tablesorter" border="1">
<thead>
<tr class="dummy_head">
<td>Last Name</td>
<td>First Name</td>
<td>Email</td>
<td>Registerd</td>
<td class="hidden_date">Registerd hidden</td>
</tr>
<tr>
<th>Last Name</th>
<th>First Name</th>
<th>Email</th>
<th>Registerd</th>
<th class="hidden_date">Registerd hidden</th>
</tr>
</thead>
<tbody>
<tr>
<td>Smith</td>
<td>John</td>
<td>[email protected]</td>
<td>10 May 2011</td>
<td class="hidden_date">2011-05-10</td>
</tr>
<tr>
<td>Bach</td>
<td>Frank</td>
<td>[email protected]</td>
<td>30 Apr 2011 </td>
<td class="hidden_date">2011-04-30</td>
</tr>
<tr>
<td>Doe</td>
<td>Jason</td>
<td>[email protected]</td>
<td>2 Jun 2011</td>
<td class="hidden_date">2011-06-02</td>
</tr>
<tr>
<td>Conway</td>
<td>Tim</td>
<td>[email protected]</td>
<td>13 Aug 2011</td>
<td class="hidden_date">2011-08-13</td>
</tr>
</tbody>
</table>
</body>
</html>
Uiteraard zijn variaties hier op mogelijk en kan er nog wat geoptimaliseerd worden.
Gewijzigd op 16/03/2011 12:35:57 door Kris Peeters