title: Sorting HTML table using tablesorter jquery plugin
body: <p>I converted the json from cartodb to HTML table using javascript. Now i am trying to use the Table sorter Jquery Plugin for making into a sortable tables. I used the Tablesorter in my code but i couldnot able to get any sorting in the result.Below is my code, </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;script src="http://code.jquery.com/jquery-2.1.1.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/jquery.tablesorter.js"&gt;&lt;/script&gt;
      &lt;script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" /&gt;
     &lt;link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.9/css/jquery.dataTables.css"&gt;
      &lt;style&gt;
          canvas {
              height: 400px;
              margin: 5px;
              width: 1500px;
          }
  
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="excelDataTable"&gt;
      &lt;/div&gt;
  
  
      &lt;script&gt;
          $(function () {
                      data2 = "carto"; 
                      json_link = 'http://development.localhost.lan:8080/api/v2/sql?q=SELECT * FROM ' + data2;
                      $.getJSON(json_link, function (result) { 
                          var th_main = "";
                          for (var e in result['fields']) {
                              th_main = th_main + '&lt;th&gt;' + e + '&lt;/th&gt;';
                          }
                          var table_header = '&lt;thead&gt;' +
                                    '&lt;tr&gt;' +
                                      th_main +
                                   '&lt;/tr&gt;' +
                                '&lt;/thead&gt;';
                          var body_main = "";
                          for (var i = 0; i &lt; result['rows'].length; i++) {
                              var tr = "&lt;tr&gt;";
                              for (var ele in result['rows'][i]) {
                                  tr = tr + '&lt;td&gt;' + result['rows'][i][ele] + '&lt;/td&gt;';
                              }
                              var tr = tr + "&lt;/tr&gt;";
                              body_main = body_main + tr;
                          }
                          var table_body = '&lt;tbody&gt;' + body_main + '&lt;/tbody&gt;';
                          var table = "&lt;table class='table table-bordered table-hover table-condensed table-striped'&gt;" + table_header + table_body + "&lt;/table&gt;";
                          $("#excelDataTable").html(table);
                          $(document).ready(function() { 
                              $("#excelDataTable").tablesorter(); 
                          } 
                                  );
  
  
  
          });
      }  
                         }
              );
          });
  
  &lt;/script&gt;
  
  
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p><a href="https://i.stack.imgur.com/gJiCU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gJiCU.png" alt="enter image description here"></a></p>