making html table sortable (with headers and data loaded using javascript)

Question

I have the following html in a website:

<table id="list" class="tablesorter">
  <thead id="header">
  </thead>
  <tbody id="rows">
  </tbody>
</table>

I load the header and rows of the table using javascript. Example of how I fill the headers:

$.get( '/getdata',{}, function(mydata) {    

        // Parses JSON Into Array
        var array = $.parseJSON(mydata);
        var html = '<tr>';
        html+='<th>#</th>';
        html+='<th>One</th>';
        html+='<th">TOTAL</th>';
        var available = {};
        for (var i = 0; i < array.length; i++) {
            available_item = array[i];
            html+='<th><abbr title="'+array[i].text+'"><img src="img/flags2/'+array[i].country+'.png"></img></abbr></th>';
        };
        html += '</tr>';
        $(html).appendTo('#header');
});

The rows are filled in a similar way: ajax get, for loop, and append to html.

Now I need the table columns to be sortable. I was trying to get it work with jquery tablesorter but it is not working. I suppose that it is not working because my data is loaded using javascript.

How can I make this table sortable?

Make sure you're calling the tablesorter plugin after the table is created ($(html).appendTo('#header');)- I've done this in the past and it works nicely. — Scott
– Scott, Commented Apr 13, 2015 at 17:06

user4341206 · Accepted Answer · 2015-04-13 17:12:49Z

1

Add $("#list").tablesorter(); at the end (when table is already filled with all data, thead and tbody)... I am using the same in my application and works fine.

answered Apr 13, 2015 at 17:12

user4341206

6451 gold badge7 silver badges27 bronze badges

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

Comments

Nishit Maheta · Accepted Answer · 2015-04-13 17:18:20Z

1

use below code. add $("#list").tablesorter(); at data loop end.

$.get( '/getdata',{}, function(mydata) {    

    // Parses JSON Into Array
    var array = $.parseJSON(mydata);
    var html = '<tr>';
    html+='<th>#</th>';
    html+='<th>One</th>';
    html+='<th">TOTAL</th>';
    var available = {};
    for (var i = 0; i < array.length; i++) {
        available_item = array[i];
        html+='<th><abbr title="'+array[i].text+'"><img src="img/flags2/'+array[i].country+'.png"></img></abbr></th>';

       if(array.length === (i+1)){
           html += '</tr>';
           $(html).appendTo('#header');
           $("#list").tablesorter(); 
        }
    };

 });

answered Apr 13, 2015 at 17:18

Nishit Maheta

6,0413 gold badges19 silver badges32 bronze badges

Comments

Uzumaki Naruto · Accepted Answer · 2015-04-13 17:24:29Z

1

Yes you can do it

Looking at your title making html table sortable (with headers and data loaded using javascript)

It doest matter if you are loading data via jquery or simply using php ... look for datatables in bootstrap .. This plugin provides all types of data manipulation with the tables that also includes sorting of the data ... you can also perform search in the table. All you have to do is give your table some id like "mytable" then write

$(document).ready( function () {
     $('#mytable').DataTable();

} );

after that you can start to include different attributes to select the type of sorting searching etc ... hope that helps

answered Apr 13, 2015 at 17:24

Uzumaki Naruto

7531 gold badge10 silver badges29 bronze badges

Collectives™ on Stack Overflow

making html table sortable (with headers and data loaded using javascript)

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related