2016-07-26 28 views
0

Ich habe Probleme beim Sortieren einer dynamisch erstellten HTML-Tabelle. Ich erstelle es mit Jade/Mops. Ich versuche, das Skript sorttable.js hier zu finden http://www.kryogenix.org/code/browser/sorttable/. Ich bin noch irgendwie neu zu html/javascript. Also, wenn es einen offensichtlichen Grund gibt, warum es nicht funktioniert, könnte jemand bitte darauf hinweisen?Kann HTML-Tabelle mit sorttable.js nicht sortieren

ist hier etwas von dem HTML-Code aus der Vorlage erzeugte

<html> 
    <head> 
    <script src="/path/to/sorttable.js"></script> 
    <style> 
    th.clickable:hover 
    { 
    color:green 
    }  
    th, td 
    { 
    padding:5px; 
    } 
    th.clickable 
    { 
    cursor: pointer;  
    } 
    </style> 
</head> 
<body> 
<script> 
    var newTableObject = document.getElementById(tbl) 
    sorttable.makeSortable(newTableObject) 
</script> 
<table class="sortable" id="tbl"> 
    <tr> 
    <th class="clickable">id</th> 
    <th class="clickable">value</th> 
    </tr> 
    <tr> 
    <td>100</td> 
    <td>100</td> 
</tr> 
    <tr> 
    <td>200</td> 
    <td>200</td> 
</tr> 
</table> 
</body> 
</html> 

Das Ziel ist es, so zu haben, wenn ich auf dem Header klicken Sie die Tabelle nach dieser Spalte sortieren.

Antwort

0

Zum Zeitpunkt des Code ausführt:

var newTableObject = document.getElementById(tbl) 
sorttable.makeSortable(newTableObject) 

Ihr Tisch noch nicht gemacht hat und nicht verfügbar ist. Also, Sie übergeben undefined an die sorttable.makeSortable Methode. Sie können dies testen, indem Sie eine Trace-Anweisung hinzugefügt, nachdem Sie das Element erhalten:

var newTableObject = document.getElementById(tbl) 
console.log(newTableObject) 

Sie sollten diesen Code warten, um zu feuern, nachdem Sie Ihren Tisch gemacht hat. Etwas wie folgt aus:

onLoad = function(){ 
    var newTableObject = document.getElementById(tbl) 
    sorttable.makeSortable(newTableObject) 
} 

und erklären, dass etwa so:

// using jQ 
$(document).ready(onLoad()) 

oder für Normal JS

<body onload="onload()"> 
+0

oder Sie können versuchen, Ihren Skriptblock unter Ihre deklarierte Tabelle zu verschieben, obwohl das nicht die beste, offensichtlichste Lösung ist. – jusopi

+0

versuchte beide, immer noch kein Glück: \ – user2770808

+0

funktioniert für mich (das ist der Onload wird aufgerufen und die Tabelle ist nicht undefiniert) http://codepen.io/jusopi/pen/pbKymd – jusopi

1

Bitte entschuldigen, wenn dies bereits bekannt ist ... aber Das script-Tag wird gelesen und ausgeführt, sobald der Browser darauf stößt. Haben Sie versucht, das Skript-Tag nach Ihrem Tisch zu platzieren?