Creating HTML table from JSON with JQuery, trying to sort with Tablesorter plugin, but not working

Question

I'm having some trouble getting tablesorter to work with an HTML table that's being created with JQuery from JSON data. I get the table created, and the column headers highlight when I click them but it doesn't sort the data. The JQuery that creates the table is this:

function buildHtmlTable() {
     var columns = addAllColumnHeaders(myList);

     for (var i = 0 ; i < myList.length ; i++) {
         var row$ = $('<tr/>');
         for (var colIndex = 0 ; colIndex < columns.length ; colIndex++) {
             var cellValue = myList[i][columns[colIndex]];

             if (cellValue == null) { cellValue = ""; }

             row$.append($('<td/>').html(cellValue));
         }
         $("#excelDataTable").append(row$);
     }
 }

function addAllColumnHeaders(myList) {
     var columnSet = [];
     var headerTr$ = $('<thead/>');

     for (var i = 0 ; i < myList.length ; i++) {
         var rowHash = myList[i];
         for (var key in rowHash) {
             if ($.inArray(key, columnSet) == -1){
                 columnSet.push(key);
                 headerTr$.append($('<th/>').html(key));
             }
         }
     }
     $("#excelDataTable").append(headerTr$);

     return columnSet;
 }

This builds the table, and has the THEAD and TBODY tags required by tablesorter. I then create the table and run the tablesorter function like this:

$(document).ready(function() { 
  buildHtmlTable();
  $('#excelDataTable').tablesorter();

});

This is the HTML:

<body>

  <table id="excelDataTable" class="tablesorter">
  </table>

</body>

When I click on the table headers they get highlighted by a blue box (like they're aware of being clicked), but they do not sort. I thought it had something to do with created the table dynamically, as the tablesorter will work with a hardcoded HTML table. But for this application I will be getting JSON data and will need to build out the table based on what I receive. The table data will not change dynamically, its just created that way. Any help appreciated, and will definitely post back further details if needed. Thanks in advance!

I see where you are creating the thead but where are you creating the tbody? It seems like the table rows (<tr>)are getting appended to the <table> element directly via $("#excelDataTable").append(row$); instead of getting appended to <table><tbody>...? — adilapapaya
– adilapapaya, Commented Jan 19, 2016 at 23:59
If you are using my fork of tablesorter, it includes a build widget which can load and build your table from an array, CSV, or JSON data. — Mottie
– Mottie, Commented Jan 20, 2016 at 5:21
Thanks for the replies guys! I wondered about the table it built too. When I inspected the HTML that code generated it looked OK. I can double-check that though. I'm going to try that build widget you linked Mottie. — Tom H
– Tom H, Commented Jan 20, 2016 at 14:04

Tom H · Accepted Answer · 2016-01-20 22:32:32Z

2

Mottie's suggestion to use the build widget worked for me. I changed the file format containing the data from JSON to CSV. Javascript is

$(function() {
  $('#excelDataTable').tablesorter({
    theme: 'blue',
    widgets: ['zebra'],
    widgetOptions: {
      // *** build widget core ***
      build_type      : 'csv',
      build_source    : { url: 'data.txt', dataType: 'text' },
      build_headers   : {
        widths  : ['50%']
      }
    }
  });
});

And HTML is simply

<body>

  <div id="excelDataTable"></div>

</body>

Also, I did have to do some tweaking to get chrome to use a locally hosted file, however this worked straight away in IE.

answered Jan 20, 2016 at 22:32

Tom H

694 bronze badges

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

Collectives™ on Stack Overflow

Creating HTML table from JSON with JQuery, trying to sort with Tablesorter plugin, but not working

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related