Alarmlist maken

Status
Niet open voor verdere reacties.
Alright,

Je kan een demo'tje hier vinden: Turn the tables. (klik op de headers om te sorteren)

Het idee is dit:
1. include .js bestand
2. maak nieuw object aan - hoeft maar 1 keer, zelfs voor verschillende tabellen
3. roep de .sort() methode aan, wanneer je maar wilt.​
sort() werkt zo:[JS]function sort(tableID, headerID, desc)

tableID: (string) id naar table, wordt met doc.geby opgehaald
headerID: (nummer) nummer van je kolommen. 0 is de 1e, 1 is de 2e, etcetera
desc: (boolean) aflopend of niet[/JS]
Je moet de source code maar even kijken van de demo, het is niet zo heel gecompliceerd.




:thumb:
 
Laatst bewerkt:
Vegras zei:
Alright,

Je kan een demo'tje hier vinden: Turn the tables. (klik op de headers om te sorteren)

Het idee is dit:
1. include .js bestand
2. maak nieuw object aan - hoeft maar 1 keer, zelfs voor verschillende tabellen
3. roep de .sort() methode aan, wanneer je maar wilt.​
sort() werkt zo:[JS]function sort(tableID, headerID, desc)

tableID: (string) id naar table, wordt met doc.geby opgehaald
headerID: (nummer) nummer van je kolommen. 0 is de 1e, 1 is de 2e, etcetera
desc: (boolean) aflopend of niet[/JS]
Je moet de source code maar even kijken van de demo, het is niet zo heel gecompliceerd.




:thumb:
Klik om te vergroten...

Bedankt Vegras,

Opzich denk ik het te begrijpen en kan hiermee dan ook een html table maken welke sorteerd. maar nu voor de js gecreerde table.... Dit werkt niet?

Het is geen nette js code maar hoe krijg ik dit werkend??

http://83.232.122.113:502/tables/table.html

Bedankt voor je hulp:thumb:
 
Je hebt zowiezo 2x het .js bestand geinclude.

Het komt omdat je dit doet:[JS] document.getElementById('myTable').appendChild(row);[/JS]je moet zoiets doen:
[JS] document.getElementById('myTable').getElementsByTagName('TBDOY')[0].appendChild(row);
[/JS]want de tr's moeten natuurlijk in de <tbody> komen, niet in de <table> direct.


:thumb:
 
Vegras zei:
Je hebt zowiezo 2x het .js bestand geinclude.

Het komt omdat je dit doet:[JS] document.getElementById('myTable').appendChild(row);[/JS]je moet zoiets doen:
[JS] document.getElementById('myTable').getElementsByTagName('TBDOY')[0].appendChild(row);
[/JS]want de tr's moeten natuurlijk in de <tbody> komen, niet in de <table> direct.


:thumb:
Klik om te vergroten...

JAaaaaaa... dankjewel Vegras da was het! ja.. niet echt handig van mij... Is er misschien een mogelijkheid om de werkelijke door het js gegenereerde HTML code te presenteren zodat zoiets als dit zichtbaar wordt...

Wederom bedankt!:thumb:
 
Vegras zei:
Hoe bedoel je? Ik snap je vraag niet.
Klik om te vergroten...

Ik bedoel de gegenereerde HTML code uit het script wat de tabel maakt.

Als bijvoorbeeld de bijgevoegde code wordt uitgevoerd komt hier een HTML tabel uit. Nu is het natuurlijk de bedoeling dat ik tijdens het schrijven van het script de tabel kan visualiseren om te begrijpen wat ik doe.. Hier zit het probleem.. dat lukt niet echt met het gevolg dat er dingen fout dubbel en niet goed gaan..
Nu dacht ik misschien is er een mogelijkheid om de html code die hieruit komt te presenteren? Dat zou mij helpen met fout zoeken.

Ik ben nu op zoek waarom ik l-1 moet toepassen om geen fout in de tabel te krijgen (laatste regel undifined) in ;for (j=0; j < l-1; j++) {???:confused:




Code: 
function parse_events(pad, table) {
events = ajax(pad + new Date().getTime())
var raw = events;
raw = raw.split ('\r\n');
//raw.reverse()
var j,l = raw.length;
aantalrows = raw.length;

for (j=0; j < l-1; j++) {			// creates the table rows
	var data = raw[j];
	var nummer = data.split(',');
	myarray[j]= nummer;
    var row = document.createElement("tr");
			// colums
			
			
            for (var i = 0; i < 7; i++) {
                // Create a <td> element and a text node, make the text
                // node the contents of the <td>, and put the <td> at
                // the end of the table row
                var cell = document.createElement("td");

			if (i==0){
			nummer[0] = j;
			}
			if (i==2){
			var time = ((nummer[2] * 1000) + 7200 * 1000);// timeoffset added 1-7-2010
			var myDate = new Date(time);//1276590251000
			str = (myDate.toUTCString());
			starttijd = str;
			nummer[2] =  starttijd;		
			sortArray[j] = nummer[2]
			}	
			if (i==4){
			var time = ((nummer[4] * 1000) + 7200 * 1000);
			var myDate = new Date(time);
			str = (myDate.toUTCString());
			starttijd = str;
			nummer[4] =  starttijd;		
			}
			
			if (i==6){
			nummer[6] = nummer[6] + ' s'
			}


			
                var cellText = document.createTextNode(nummer[i]);	
                cell.appendChild(cellText);
                row.appendChild(cell);
            }

            // add the row to the end of the table body
          document.getElementById(table).appendChild(row);
 
		var rows = document.getElementById(table).getElementsByTagName ("tr");
		
}
 
de tabel kan visualiseren om te begrijpen wat ik doe..
Klik om te vergroten...
Nou, je kan hem natuurlijk gewoon appenden in de tabel, en deze een 'border=1' geven. Maar dat is denk ik niet wat je wilt?

De j-1 komt, denk ik, omdat je raw file dan een enter als laatste heeft. Deze heeft dan geen data en dan breekt je script.

Heb je een voorbeeld online?
 
De ttt heeft ook een laatste parameter, die nu standaard op true staat - dit is de 'desc' parameter, als je die op false zet dan sorteert ie omgekeerd.

Ah, ja, zoals ik al zei, de laaste regel van je .csv files zijn een lege regel. Die gebruikt ie dus ook, maar die kan je niet splitten. Dus de laatste regel is leeg, en dus undefined.

Hier is een voorbeeldje waarbij je kan sorteren, dubbel: 1x klikken is asc, 2x klikken is desc, enzovoorts.

http://that-guy.net/stuff/webdev/peba25/panelpc_events1.html :thumb:


overgens is het sorteren ERG langzaam, als je meer items gaat toevoegen moet je mischien een andere sort methode vinden/maken, want nu gebruikt het bubblesort. Quicksort zou beter zijn, als ik tijd overheb zal ik eens kijken of ik iets kan flansen.
 
Laatst bewerkt:
Bedankt Vegras,:thumb:

Ik liep inderdaad al snel tegen de traagheid van bubblesort.... Ik had als doel voor het sorteren van de tabel om bij het laden v/d pagina de rij met de meest recente datum bovenaan te zetten in de tabel.
Daarna zou het mooi zijn om te kunnen sorteren op de colommen.

Ik heb hievoor de raw.reverse() toegepast. Dit werkt mooi en inverteerd de regels uit het csv bestand. Hiermee zou ik uit de voeten kunnen maar... Ik zou graag de 2 csv bestanden willen samenvoegen en hiervan de laatste bovenaan in de tabel zetten...
http://83.232.122.113:502/panelpc_events1.html
Hier zie je de 2 csv bestanden samen in 1 tabel alleen nu is de vraag hoe sorteer ik deze op de datum? (meest recente bovenaan)?
 
Hmm, dat wordt even denken. Het makkelijkste is als je de 'nix timestamp erbij zet, want die is altijd goed te ordenen sinds het een getal is. Maar je wilt een mooie datum zien, dus moeten we even iets anders verzinnen.

Mischien kan je een invisible <span> gebruiken en daar de stamp inzetten. Zal asap even wat prutsen.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan