CODEWITHSUNDEEP
jqueryajaxtablesorter
JNRoberts
JNRoberts

Reputation: 31

Tablesorter Not Sorting AJAX Table

I am building a table from a CSV file using AJAX. The table looks fine. But no matter what I try, I can't get tablesorter to make it sortable. I've tried just about every solution I could find here on stackoverflow. Any suggestions?

Here's the 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();
});

Upvotes: 0

Views: 191

Answers (1)

Jaydo
Jaydo

Reputation: 1859

You've got a lot of problems with your code but you were heading in the right direction.

1: You're missing a lot of semicolons. There are too many to point out but check the plunker.

2: You need to include jQuery before you include Tablesorter because Tablesorter relies on jQuery.

3: To use Tablesorter on a table, that table must have a <thead> and <tbody>. I can see you've commented out the code which adds it to your table but you do need it. The docs don't highlight it very well but it's under "Getting Started".

4: AJAX calls are asynchronous which means your code won't necessarily run in order. You should initialize Tablesorter within the AJAX call after you've processed the data. 

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

5: When you are adding rows to the tbody, you are adding an extra row at the start when i === 0. Move this code thelist += "<tr>"; inside your loop and if statement.

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: You are appending the rows to a table called "#test" but initializing Tablesorter on "#myTable".

Plunker

Upvotes: 1

Related Questions