JSON/Ajax generated table with jQuery tablesorter is not sortable

Question

I am having problems with sorting an JSON/Ajax generated table. The tablesorter i use is this: https://github.com/Mottie/tablesorter and it works fine when I create tables and content directly in HTML.

This is the code on my index.php:

<html>

<head>
<link rel="stylesheet" href="styles.css">
<script type="text/javascript" src="jquery-2.1.3.min.js"></script> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="tablesorter master/js/jquery.tablesorter.js"></script> 
</head>

<body>
include 'purchases.php';
<div id='id01'></div>

<script type="text/javascript" language="javascript">
//$(document).ready(function() { 
    //call the tablesorter plugin 
    $("#myTable").tablesorter();
    $("#myTable").trigger("update");
    } 
); 
</script> 


</body>
</html>

This is my purchases.php:

<script>

var xmlhttp = new XMLHttpRequest();
var url = "purchasesDB.php";

xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        myFunction(xmlhttp.responseText);
    }
}
xmlhttp.open("GET", url, true);
xmlhttp.send();

function myFunction(response) {
    document.getElementById("id01").innerHTML = "";

    var arr = JSON.parse(response);
    var i;
    var out = "<table cellspacing='1' class='sortable' id='myTable'><thead><tr><th>Company</th><th>Amount</th><th>Margin</th><th>Date</th><th>Date 2</th><th>Customer</th><th>Transaction phase</th></tr></thead><tbody>";

    for(i = 0; i < arr.length; i++) {   
    var aTT = arr[i].Id;

  out += "<tr><td><a href='index.php?purch=" + aTT + "&p=Purchased'>" +     

       arr[i].Company + 
        "</a></td><td>" +
         arr[i].Amount +
        "</td><td>" +
         arr[i].Margin +
        "</td><td>" +
         arr[i].Date +
        "</td><td>" +
         arr[i].Date2 +
        "</td><td>" +
         arr[i].Customer +
        "</td><td>" +
        arr[i].TransactionPhase +
        "</td></tr>";

    }
    out += "</tbody></table>";
        //out += "</tbody></table>";



    document.getElementById("id01").innerHTML = out;

}
</script>

The purchasesDB.php is a JSON response and everything works fine except the sorting, which doesn't work at all. What I can see, the potential problems are:

The table isn't assigned the class 'tablesorter'.
The data is not really in the html, only the script. This shows when i watch the page source for index.php where all i can see is the index.php code itself and the included script (but only as the script, not generated html).

I have tried to put the -tags directly in the HTML code on the index page, but this makes no difference.

Anyone got an idea? As you understand I'm pretty new to this.

Thanks a lot!

Peter

Call tablesorter after the table has been added to the DOM in your myfunction — Rory McCrossan
– Rory McCrossan, Commented Apr 7, 2015 at 12:00
Thanks Rory! Can you please give me a code example of how I should do this? Sorry for my lack of knowlegde. — Peter V
– Peter V, Commented Apr 7, 2015 at 12:05
You simply need to more $("#myTable").tablesorter(); to after the innerHTML = out line. — Rory McCrossan
– Rory McCrossan, Commented Apr 7, 2015 at 12:09
No problem, glad to help. I've added it as an answer for you. — Rory McCrossan
– Rory McCrossan, Commented Apr 7, 2015 at 13:00

Rory McCrossan · Accepted Answer · 2015-04-07 13:00:12Z

1

You need to initialise the tablesorter plugin after the table has been added to the DOM. To do this, move $("#myTable").tablesorter(); to after the innerHTML = out line.

answered Apr 7, 2015 at 13:00

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

JSON/Ajax generated table with jQuery tablesorter is not sortable

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related