How to sort dynamically generated table in jquery

Question

I am working in a website in which page is displaying data in table when some option is selected. The page is creating and displaying data in a table dynamically by converting the json output from AJAX call to html table output. I need to sort individual columns of the table according to alphabetically/date wise/open-close when subsequent table header is clicked.

my code is something like this:-

if (json.d[0].length > 0){

    htmlTable += "<table class='table table-striped' id='myTable'>"+
    "<tr>"+
    "<th  style='background-color: #df820a;'>Customer</button></th>"+
    "<th style='background-color: #df820a;'>Survey date</th>"+
    "<th style='background-color: #df820a;'>Contact by</th>"+
    "<th style='background-color: #df820a;'>Assigned to</th>"+
    "<th style='background-color: #df820a;'>Status</th>"+
    "<th style='background-color: #df820a;'>Resolution</th>"+
    "<th style='background-color: #df820a;'>Coupon offered</th>"+
    "</tr>";

    for (var i = 0; i < json.d[0].length; i++) {
        htmlTable += "<tr>"+
        "<td>" + json.d[0][i].customerName1 + "</td>"+
        "<td>" + json.d[0][i].createdDt1 + "</td>"+
        "<td>" + json.d[0][i].customerContactBy1 + "</td>"+
        "<td>" + json.d[0][i].AssignedTo1 + "</td>"+
        "<td>" + json.d[0][i].alertStatus1 + "</td>"+
        "<td>" + json.d[0][i].resolution1 + "</td>"+
        "<td>" + json.d[0][i].couponOffered1 + "</td>"+;
        "</tr>";
    }
    htmlTable += "</table>";
    $('#AlertManagement').html(htmlTable);
}

Is there any way by which I can sort these dynamically generated columns???

A table in HTML sense is not like a DataTable in programming sense, all it does is provides a layout, you will have to do any sorting by storing your data in arrays and repopulating the table after each 'sort'. — Wobbles
– Wobbles, Commented Aug 4, 2014 at 11:51

wrxsti · Accepted Answer · 2014-08-04 11:54:19Z

2

I use Christian Bach's tablesorter plugin. It works really well with ajax calls. It's as easy as this:

$.post('script.php', formData, function(data){
    $("#myTable").html(data).tablesorter(); 
});

Of course I understand you are using json so it will be a little different than this, but I think you see where this is going.

http://tablesorter.com/docs/#Demo

Hope this helps!

answered Aug 4, 2014 at 11:54

wrxsti

3,4941 gold badge21 silver badges30 bronze badges

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

1 Comment

wrxsti Over a year ago

Did this help with your issue? Did you have any further questions? Just a follow up as I see there is no selected answer. :)

Collectives™ on Stack Overflow

How to sort dynamically generated table in jquery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related