Tablesorter Sortierung nicht AJAX Tabelle

Ich baue eine Tabelle aus einer CSV-Datei mit AJAX. Der Tisch sieht gut aus. Aber egal, was ich versuche, ich kann den Sorter nicht dazu bringen, ihn sortierbar zu machen. Ich habe fast jede Lösung ausprobiert, die ich hier auf Stackoverflow finden konnte. Irgendwelche Vorschläge?Tablesorter Sortierung nicht AJAX Tabelle

Hier ist der Code:

<html> 
<head> 
<link rel="stylesheet" type="text/css" href="http://tablesorter.com/themes/blue/style.css"> 
<link rel="stylesheet" type="text/css" href="http://tablesorter.com/docs/css/jq.css"> 
<script type="text/javascript" src="http://tablesorter.com/__jquery.tablesorter.min.js"></script> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
<script> 

$(document).ready(function() { 
    $.ajax({ 
     type: "GET", 
     url: "MovieList.csv", 
     dataType: "text", 
     success: function(data) {processData(data);} 
    }); 

}); 

function processData(allText) { 
    var allTextLines = allText.split(/\r\n|\n/); 
    var headers = allTextLines[0].split(","); 
    var lines = []; 
var thelist 
var columns = []; 
//thelist = "<thead><tr>" 
//for (i in headers) { 
//headers[i] = headers[i].replace(/"/g,"") 
//thelist += "<th>"+headers[i]+"</th>" 
//} 
//thelist += "</tr></thead><tbody>" 
for (i in allTextLines) { 
thelist +="<tr>" 
columns = allTextLines[i].split(",") 
if (i > 0) { 
for (i in columns) { 
columns[i] = columns[i].replace(/"/g,"") 
thelist += "<td>" 
thelist += columns[i] 
thelist += "</td>" 
} } 
thelist += "</tr>" 
} 
//thelist += "</tbody>" 


$("#test").append(thelist); 

}; 

$(document).ready(function() { 
$("#myTable").tablesorter(); 
});

Quelle

2016-04-02 JNRoberts

Sie haben eine Menge Probleme mit Ihrem Code bekommen, aber Sie wurden in die richtige Richtung.

1: Ihnen fehlen viele Semikolons. Es gibt zu viele, um darauf hinzuweisen, aber überprüfe den Plunker.

2: Sie müssen jQuery einbeziehen, bevor Sie Tablesorter einschließen, da Tablesorter auf jQuery angewiesen ist.

3: Um Tablesorter für eine Tabelle zu verwenden, muss diese Tabelle über <thead> und <tbody> verfügen. Ich kann sehen, dass Sie den Code auskommentiert haben, der ihn zu Ihrer Tabelle hinzufügt, aber Sie brauchen ihn. Die docs hebt es nicht sehr gut hervor, aber es steht unter "Erste Schritte".

4: AJAX-Aufrufe sind asynchron, was bedeutet, dass Ihr Code nicht unbedingt in der richtigen Reihenfolge ausgeführt wird. Sie sollten Tablesorter innerhalb des AJAX-Aufrufs initialisieren, nachdem Sie die Daten verarbeitet haben.

$.ajax({ 
    type: "GET", 
    url: "MovieList.csv", 
    dataType: "text", 
    success: function (data) { 
     processData(data); 
     $("#myTable").tablesorter(); 
    } 
});

5: Wenn Sie Zeilen in die tbody hinzufügen, den Sie hinzufügen, eine zusätzliche Zeile am Anfang, wenn i === 0. Verschieben Sie diesen Code thelist += "<tr>"; in Ihre Schleife und if-Anweisung.

for (var i in allTextLines) { 
    var columns = allTextLines[i].split(","); 
    if (i > 0) { 
     thelist += "<tr>"; 
     for (var j in columns) { 
      thelist += "<td>"; 
      thelist += columns[j]; 
      thelist += "</td>"; 
     } 
    } 
    thelist += "</tr>"; 
}

6: Sie sind die Zeilen in eine Tabelle anhängt genannt "#test" aber Tablesorter auf "#myTable" initialisiert.

Plunker

Quelle

2016-04-02 08:06:31 Jaydo

Halb Doppelpunkte sind nicht notwendig, in vielen Fällen in JS, nur damit Sie wissen. – Terry

@Terry Sie haben Recht, aber in Bezug auf die Lesbarkeit des Codes, sie sind wichtig, um dem Leser deutlich zu machen, wo der Autor die Aussage beenden wollte. Wenn der Autor sie in einige Aussagen, aber nicht in ähnliche Aussagen einbezieht, veranlasst es den Leser (oder zumindest mich) sich zu fragen, ob sie die Aussage dort beenden wollten. – Jaydo

Schöne Antwort! Ich möchte auch erwähnen, dass Sie, wenn Sie meinen [fork of sellersorter] (http://mottie.github.io/tablesorter/docs/) verwenden, den [ignore articles parser] (http: // mottie. github.io/tablesorter/docs/example-parsers-ignore-articles.html), um "The", "A" und "An" in den Titeln beim Sortieren zu ignorieren. – Mottie

Tablesorter Sortierung nicht AJAX Tabelle

Antwort

Verwandte Themen