tabelle sortieren

  • so jetzt mein problem dazu...

    da wo +'<tr id="a0"> und so weiter steht sollen x beliebige spalten erzeugt werden die der user durch highscoresuche erzeugen tut ...ich sage mal so zwischen 20-60


    ich könnte da ja jetzt <tr id="a0"> <tr id="a1"> ... und so weiter ,also zb bis 60...

    nur wenn der user dann wenniger spalten erzeugen tut sind die spalten nicht mehr sortierbar..

    wie kann ich da jetzt userbedingte spalten erzeugen?

    Der user weiss aber auch nicht wie viele spalten erzeugt werden weil das durch das such ergebniss bestimmt wird...

    ich hoffe ihr versteht was ich meine und könnt ir irgendwie dabei helfen


    Code
    document.getElementById("a"+a).innerHTML +='<td> '+a+'+1</td><td>'+a+'</td><td>'+a+'</td><td>'+a+'</td><td>'+a+'</td><td> '+a+'1</td><td> 2017/11/'+a+' </td></tr>'
      }

    der code ist nur zum testen da..das soll dann die hghscore abfrage erstellen

  • Zitat

    ich hoffe ihr versteht was ich meine

    Was mich betrifft, nicht so richtig. Was ist denn das für eine Suche, was wird durchsucht und wo kommt das Suchergebnis her? Besteht das Suchergebnis einfach in der Zahl der Zeilen, die erzeugt werden sollen?

  • die daten kommen von ein browser spiel.da soll mehrere profile abgefragt werden und dann in der tabelle rein wo man durchs klicken die grösse sortieren kann ,zb geld höhe und so..



    ich sollte noch erwähnen das es ein userscript ist.

  • Du hast diese Frage noch nicht beantwortet:

    Zitat

    Besteht das Suchergebnis einfach in der Zahl der Zeilen, die erzeugt werden sollen?

    oder schließt es auch die Daten ein, die in den Zellen angezeigt werden sollen?

  • der request soll in einer schleife laufen wo die id jedesmal wechselt und die erforderlichen daten holt..

    nun ist mein problem das in diesen fall jetzt bei schleifen durchlauf 5 ende ist ....


    ich knnte das

    Code
     + '<tr id="a1"> '<tr id="a2> .......

    bis 60 oder so wiederholen...

    nur wenn dann aber nur 20 requeste durchlaufen habe ich zuviele <tr id="a erstellt und meine tabelle ist nicht mehr sortierbar.


    deswegen muss genau so viele <tr id=""> erstellt werden die beim request rauskommen....das kann natürlich 5 sein oder auch 60 ..

    das weis nur der server wie viele ergebnisse da raus kommen...


    ich erstelle eine highscoresuche die im bestimmten geld und punktebereich suchen soll..das ergebniss wird dann abgerufen was ich dann abfange und hier in der tabelle als sotierfunktion einbauen will....


    ich hoffe man versteht mich jetzt weil bin nicht gut in erklären

  • Jetzt verstehe ich es etwas besser, aber noch nicht vollständig:

    Code
    + '<tr id="a1"> '<tr id="a2> .......

    Ist das 1, 2, 3, ... die User-ID?


    Wenn die User-ID nicht einfach eine laufende Nummer ist, wo kommt sie dann her?


    Ich nehme an, DU willst den GM_xmlhttpRequest in einer Schleife absetzen und entsprechend dem Ergebnis die Schleife beenden. Leider postest Du nicht, wie Du die Daten heraus holst, Wie sieht das XML aus, wenn der User nicht vorhanden ist?

  • http://www.pennergame.de/highscore/user/



    da kann man auch ohne anmeldung drauf..


    diese liste soll sotierbar werden und zusätzlich hole ich mit den request noch extra infos wie geld und so weiter .


    Code
    GM_xmlhttpRequest({
            method: 'GET',
               url: 'http://www.pennergame.de/dev/api/user.' + id + '.xml',
            onload: function(responseDetails) {
                var parser = new DOMParser();
                var dom = parser.parseFromString(responseDetails.responseText, "application/xml");
    //   hier kommt noch abfrage rein wie geld und so weiter 

    die daten sollen dann noch in der liste mit rein ..

    die liste hat ja jetzt nur 25 leute...da der user ja irgendwann leute nach geld usw suchen sollen kann das ergebniss auch mehr als 25 sein ...

    die user id bekommt man wenn man http://www.pennergame.de/highscore/user/ auf die pennernamen geht da sind die user ids versteckt und mit der id kann man dann den request machen und noch extra daten bekommen die so nicht in der highscore stehen



    Code
    document.getElementById("ii").innerHTML ='<table border="1" class="sortable" style="margin: 0 auto"><thead><tr><th >.</th><th >Platz</th><th >Sieler id</th><th >Bande</th><th >Status</th><th >Stadt</th><th>Reg</th><th >Punkte</th><th >Differenz</th><th>Cash</th><th>Fight</th></tr></thead><tfoot>'
      +'<tbody>'
     
    // hier sollen die ergebnisse rein was der request dann rausspuckt..wie gesagt das kann dann eine reihe sein 25 oder auch mehr 
    +<tr id="a1">' // so für eine reihe zb 
    +<tr id="a2">'//  für 2 reihen 
    .....usw  
      +'</tfoot></tbody></table>';

    das ist ein problem da ich vorher nicht weiss wie viele reihen da rein kommen ,muss ich dafür eine lösung finden...



    ich hoffe wir kommen der sache jetzt etwas näher weil erklären ist nicht mein ding

  • Ich versuche es mal anders: Bestätige oder korrigiere mal folgendes:


    Du möchtest die Tabelle sortierbar machen? Das funktioniert sehr gut mit dem jQuery-Plugin Datatables. Man müsste prüfen, ob es möglich ist, jQuery und dieses Plugin in einem Userscript einzubinden.


    Du möchtest zusätzliche Infos über die API lesen und in der Tabelle hinzu fügen? Dass man die User-ID aus der Tabelle lesen kann, habe ich jetzt verstanden.


    Möchtest Du die vorhandene Tabelle erweitern und ändern oder eine Kopie mit den Erweiterungen anlegen?

  • die tabelle soll so wie sie ist sein + daten aus der api...

    eine sortierbare liste habe ich ja jetzt soweit,aber bekomme die daten nicht so rein wie es soll.

    jetzt habe ich folgenes versucht

    Code
     var Zeile = document.createElement("tr");
       Zeile.id = "Zeile"+a;
            document.getElementsByTagName("table")[1].getElementsByTagName("tr")[0].appendChild(Zeile);
                            var Zelle0 = document.createElement("td");
                            var inhalt0 = document.createTextNode(apidaten);
               Zelle0.appendChild(inhalt0);
                      document.getElementById("Zeile"+a).appendChild(Zelle0);

    wenn apidaten ein bild oder links beinhaltet wird mehrder code angezeigt nicht das bild btw der link....wenn ich das jetzt noch hinbekommenwürde hätte ich es geschafft ...aber wie bekomme ich das jetzt hin das er das richtig anzeigen tut

  • habe gemerkt das text node natürlich nnur text wieder geben kann keine bilder und links ,,ich idiot.


    jetzt habe ich es mit document.createDocumentFragment();

    versucht was auch klappt aber jetzt ist die liste nicht mehr sortierbar.

    also auch mist ..

    das kann doch nicht so komplizierz sein oder doch ???

  • ich habs jetzt ...hier meine lösung die endlich funktioniert..zumindest erstmal ,script ist noch nocht fertig da kommen bestimmt noch probleme..


    Code
    var i ='<td> '+a+'</td><td> '+bild+''+platz+'</td><td>'+ida+'</td><td> '+bande+' </td><td>'+bandenstatus+' </td><td>'+stadt+' </td><td>'+reg+'</td><td> '+punkte+'</td><td>'+bild1+'  '+differenz+'</td><td><font  style="color:'+farbe1+'">'+cash+'&nbsp;&euro;</font></td><td>'+fight+' </td></tr>';
         let frag = document.createDocumentFragment();
       let row = frag.appendChild(document.createElement('tr'));
                            row.innerHTML = i;
             document.getElementsByTagName("table")[1].getElementsByTagName("tbody")[0].appendChild(frag);

    das kommt in meiner sortierbaren liste rein


    Code
    document.getElementById("ii").innerHTML +='<table border="1" class="sortable" id="tab" style="margin: 0 auto"><thead><tr><th >.</th><th >Platz</th><th >Sieler id</th><th >Bande</th><th >Status</th><th >Stadt</th><th>Reg</th><th >Punkte</th><th >Differenz</th><th>Cash</th><th>Fight</th></tr></thead><tfoot><tbody></tfoot></tbody></table>';

    und ich bzw der user kann soviele tr reihen sich zusammen suchen wie es sein muss und alles bleibt sotierbar...

    man das wahr aber nee schwere geburt für mich

  • wie in meinen letzten beitrag gesagt habe hatte ich alles soweit geschafft .... jetzt kommt das nächste problem dazu was hier zum thema auch noch passen sollte...meine tabelle ist mitlerweile sotierbar und scrollbar....

    jetzt möchte ich das der tabellenkopf stehen bleibt beim scrollen.

    habe schon gegoogelt und auch einiges getestet..


    ich habe über css mal versucht das hinzubekommen aber das klappte nur zur hälfte... habe die zeile zwar zum stehen bekommen ,aber dann hat sich sich der tabellenbreite nicht angepasst ( weil tabelle mal breiter ist und mal nicht )..

    dann habe ich die tabellenbreite ausgelesen und wollte das dann über css bzw über id dann die breite der kopfzeile anpassen,was komischerweisse nicht geklappt hat ...


    hatte dann mal die tabelle eine feste breite gegeben,was leider anschön wahr wenn der inhalt breiter wurde...,hat zwar geklappt aber der nachteil wahr das die erste spalte unter der kopzeile verschwindet...


    habe bei googel auch mal was gefunden was auch nur zur hälfte klappt ,und bei meinen versuchen habe ich es ja fast geschafft ,aber nur das grösste problem dabei ist ,das die tabelle dann nicht mehr sortierbar ist..


    also ich bräuchte hilfe das meine kopzeile stehen bleibt beim scrollen und sich die zeile weiterhin der breite anpassen tut und die ganze tabelle sortierbar bleibt ..


    zeile von der tabelle

    meine kopf

    Code
    document.getElementById("ii").innerHTML +=' <div id="scro" class="scro"><table border="1" bordercolor="black" class="sortable" id="tab" style="margin: 0 auto;"> <thead id="testt" class="testt"><tr><th >.</th><th >Platz</th><th >Spieler</th><th >Bande</th><th >Status</th><th >Stadt</th><th>Reg</th><th >Punkte</th><th >Differenz</th><th>Cash</th><th>Fight</th></tr></thead> <tfoot><tbody id="kill"></tbody></tfoot></table></div></div>';

    die ganzen test namen sind nur zum testen bis mal was klappt


    hier meine jetzige css

    Code
    addGlobalStyle('.sortable tr{margin: 50px;padding:50;text-align: center;}');
    addGlobalStyle('.sortable tr  :hover{background:#2D2D9D;}'); 
    addGlobalStyle('.sortable tr  {background:#2F4F4F;}'); 
    addGlobalStyle('.scro {width: 800px; height: 500px;overflow: auto;}');


    muss nochmal dazuschreiben das es ein user script ist und die tabellen breite immer varieirt....

    bis jetzt läuft im script alles nur die erste zeile soll stehen bleiben beim scrollen

  • Zitat

    habe die zeile zwar zum stehen bekommen ,aber dann hat sich sich der tabellenbreite nicht angepasst ( weil tabelle mal breiter ist und mal nicht )..

    dann habe ich die tabellenbreite ausgelesen und wollte das dann über css bzw über id dann die breite der kopfzeile anpassen,was komischerweisse nicht geklappt hat ...

    Hat dabei das Sortieren noch funktioniert? Wenn ja, empfehle ich, diesen Versuch weiter zu führen. Es sollte möglich sein, mit Javascript die Breite des Kopfes anzupassen. Poste doch mal diese Lösung.

  • ich werde das gleich noch mal testen und meine fehlversuche dann posten..


    habe kleine frage zwischen durch


    Code
    var aa = blabla
    for(a=0;a<=aa.lenght;a++;)
    var test =aa.bla bla[a].innerHTML;
    alert(test)
    }

    so wird mir der alert ja öffters angezeigt.


    ich möchte aber den letzten haben,also das ende von lenght.

    wie mache ich das an besten ,das der alert den letzen wert von lenht ausliest bzw anzeigt..


    weil ich brauche immer den letzten wert aus einer reihe zb aus einer tabelle oder so ,nur kann ich length nicht mit einer fester zahlen versehen weil bei meinen scripten kommischerweisse alles variert...


    danke schon mal

  • also zur tabelle ich habe gegoogelt wie ein weltmeister aber finde nur tabellen die scrollbar sind und keine feststehende erste reihe und sortierbar sind ,oder sortierbare liste mit scrollbar und feststehender erste reihe...ich hoffe habe das jetzt richtig geschrieben,verstehe nicht warum ich das nirgendswo finde...gibst das überhaupt??



    Code
    addGlobalStyle('thead{position:absolute;}');// erste reihe steht passt sich nicht die breite an
    
    addGlobalStyle('.tesst1{position:absolute;}'); // " " "
    
    addGlobalStyle('.testt{position:absolute;width:800px;}');// erste reihe steht aber <th> wächst nicht mit,und erste reihe verdeckt,liste ist noch sortierbar

    hatte noch mehr versuche aber alles nur müll bei rumgekommen....also feststehende listen findt man ja im netzt aber wie i mein fall das sie dann noch sortierbar sein soll habe ich nix gefunden..


    das muss ja irgendwie machbar sein ...wollte mein width mal bei <th> anwenden aber der nimmt immer nur ein <th> nicht alle...auch komisch..

    also so

    Code
    addGlobalStyle('th{position:absolute;width:800px;}');

    da nimmt er nur den letzten th nicht alle..verstehe ich nicht ,habe schon viel mit css rumgespielt aber das verstehe ich gerade auch nicht

  • so ist die liste jetzt erste reihe fest und sotierbar oder jetzt sind die scrolleisten weg .


    die erste reihe hat auch noch ein schönheits fehler so die <th> passen sich nicht den unteren breiten an,also so habe ich elf mal th mit 76 px oder so also alle gleich gross


    der jetzige code

    Code
    addGlobalStyle('tbody{position:absolute; top:60px; left:100; width:76px;background:red;height:20px;}');
    addGlobalStyle('tr{width:800px;}');

    ja wie gesagt alles einzelnt kriege ich irgendwie hin,aber alles zusammen kriege ich nicht hin und finde auch nicht mal eine im netz wo man sich das abkucken könnte ..

  • Deinen Code verstehe ich nicht vollständig, aber das letzte Element in einem Array bekommst Du so:

    Code
    var arr = ["a", "b", "c", "d"];
    alert (arr[arr.length - 1]);
  • also das mit der scrollbaren tabelle mit festn kopf habe ich auf ice gelegt ...ich habe das zwar so halbwegs hinbekommenaber nur fester grösse und das ist nicht schön da meine tabelle in breite auch mal wachsen tut weil unterschiedliche benutzernamen und so länger und kürzer sind ...


    auch mit jquery habe ich es versucht


    https://www.media-web.de/de/kn…6-fixed-tabellenkopf.html


    das funktioniert auch zur hälfte da bleibt der tabellenkopf zwar stehen aber erst wenn man die seite runterscrollen tut und nicht die tabelle..


    es ist einfach noch zu kompliziert und das jquery script umschreiben das kann ich noch nicht ....



    habe mir gedacht ich baue da jetzt was anderes rein ..

    und zwar...


    wenn man die tabelle ganz runter gescrollt hat soll das script automatisch daten nachladen...ich glaube das sollte alles kein problem sein nur weiss ich nicht wie man die scroll positsion der tabelle auslesen kann ..


    ich finde zwar im netz was von scroll positsion des browsers aber wie man eine tabelle die positsion auslesen kann finde ich irgendwienicht das richtige...


    ich bräucht irgendwas wie


    if tabelle ganz unten dann starte function....


    hoffe man versteht mich

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!