/u/210455/computer_0023.JPG?f=community)
FYI, i'm an idiot als het op html en jquery aankomt. Ben van oorsprong een server beheerder en onderstaande meuk word allemaal aangemaakt vanuit een powershell script om tot een visueel aantrekkelijk rapport te komen.
That being said, ik snap het niet meer. Ik had als basis een mooi HTML document waarin ik met een hoop google-fu mooie opmaak in had aangebracht in meerdere tabellen om tot een server overzicht te komen.
Nu wil ik echter dat de kijker zelf 1 van de tabellen kan sorteren. Ik was er al achter dat dit niet met html(5) kan maar dat ik mijn uitvlucht moet zoeken in jquery en javascript. Ok, jammer maar het is niet anders. Na wat zoeken kwam ik bij http://tablesorter.com/docs/ uit wat lijkt te doen wat ik wil. Alleen lukt het implementeren in mijn bestaande HTML niet helemaal.
Code snippet:
Deze 3 scripts zitten nu in in mijn header. Maar ff quick en dirty het lokale pad helemaal aangegeven om daarin problemen uit te sluiten. Nr 1 en 2 komen uit de jquery lib. De laatste heb ik zelf ingevoegd en is een eigen baksel. Dat is tenminste als ik dit topic op stack overflow goed heb begrepen waar ik onderstaande code snippet moet laten
In de my.js zit de code:
Waarbij ik begrepen heb dat #ServerInfo het ID van de table is die ik wilt sorteren en tablesorter de aan te roepen functie is.
Als laatste heb ik de <thead> en <tbody> geopend en gesloten in de table zelf om aan te geven welke data gesorteert moet worden.
Volgens mij ben ik er volgens hun documentatie nu helemaal. Echter hij doet het dus niet. Ik ook nu geen idee hoe ik dit moet troubleshooten en mijn google-fu laat ook te wensen over omdat ik mijn god niet weet wat er nu mis is.
Kan iemand mijn google-fu op weg helpen met wat relevant leesmateriaal? Of waar ik meer bang voor ben. Mij erop wijzen dat ik ergens een noob-fuckup heb gemaakt.
That being said, ik snap het niet meer. Ik had als basis een mooi HTML document waarin ik met een hoop google-fu mooie opmaak in had aangebracht in meerdere tabellen om tot een server overzicht te komen.
Nu wil ik echter dat de kijker zelf 1 van de tabellen kan sorteren. Ik was er al achter dat dit niet met html(5) kan maar dat ik mijn uitvlucht moet zoeken in jquery en javascript. Ok, jammer maar het is niet anders. Na wat zoeken kwam ik bij http://tablesorter.com/docs/ uit wat lijkt te doen wat ik wil. Alleen lukt het implementeren in mijn bestaande HTML niet helemaal.
Code snippet:
code:
1
2
3
4
5
6
7
8
9
| <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Frameset//EN http://www.w3.org/TR/html4/frameset.dtd>
<html><head><title>Citrix Maintenance Report</title>
<script type="text/javascript" src="C:/Users/user/Desktop/TableSorter/jquery-latest.js"></script>
<script type="text/javascript" src="C:/Users/user/Desktop/TableSorter/jquery.tablesorter.js"></script>
<script type="text/javascript" src="C:/Users/user/Desktop/TableSorter/my.js"></script>
<style type=text/css>
<!-- |
Deze 3 scripts zitten nu in in mijn header. Maar ff quick en dirty het lokale pad helemaal aangegeven om daarin problemen uit te sluiten. Nr 1 en 2 komen uit de jquery lib. De laatste heb ik zelf ingevoegd en is een eigen baksel. Dat is tenminste als ik dit topic op stack overflow goed heb begrepen waar ik onderstaande code snippet moet laten
In de my.js zit de code:
code:
1
2
3
4
5
| $(document).ready(function()
{
$("#ServerInfo").tablesorter();
}
); |
Waarbij ik begrepen heb dat #ServerInfo het ID van de table is die ik wilt sorteren en tablesorter de aan te roepen functie is.
Als laatste heb ik de <thead> en <tbody> geopend en gesloten in de table zelf om aan te geven welke data gesorteert moet worden.
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| <table id="ServerInfo" class=ServerList>
<thead>
<tr bgcolor=#ECECEC><u>
<th>Server</th><th>Silo</th><th>Status</th><th>Load Eval</th><th>Sessions</th><th>Startup Error</th><th>Cycle Error</th><th>Uptime (hours)</th><th>IMA Service</th>
</u></tr>
</thead>
<tbody>
<tr bgcolor=#FFFFFF>
<td>Server01</td><td>StandardServers</td><td>Up</td><td bgcolor=>Online</td><td>1</td><td>False</td><td>False</td><td bgcolor=#F88017>102</td><td bgcolor=>Running</td>
</tr>
<tr bgcolor=#ECECEC>
<td>Server02</td><td>StandardServers</td><td>Up</td><td bgcolor=>Online</td><td>0</td><td>False</td><td>False</td><td bgcolor=>30</td><td bgcolor=>Running</td>
</tr>
<tr bgcolor=#FFFFFF>
<td>Server03</td><td>StandardServers</td><td>Up</td><td bgcolor=>Online</td><td>0</td><td>False</td><td>False</td><td bgcolor=>6</td><td bgcolor=>Running</td>
</tr>
<tr bgcolor=#ECECEC>
<td>Server04</td><td>StandardServers</td><td>Up</td><td bgcolor=>Online</td><td>0</td><td>False</td><td>False</td><td bgcolor=>30</td><td bgcolor=>Running</td>
</tr>
</tbody>
</table> |
Volgens mij ben ik er volgens hun documentatie nu helemaal. Echter hij doet het dus niet. Ik ook nu geen idee hoe ik dit moet troubleshooten en mijn google-fu laat ook te wensen over omdat ik mijn god niet weet wat er nu mis is.
Kan iemand mijn google-fu op weg helpen met wat relevant leesmateriaal? Of waar ik meer bang voor ben. Mij erop wijzen dat ik ergens een noob-fuckup heb gemaakt.
:strip_icc():strip_exif()/u/43400/avatar.jpeg?f=community){kind=avatar}
Ik ben er in ieder geval achter dat de .js files gevonden worden. Zoals ik het in TS had staan kan. Maar ook dit kan: