Creating a dynamic table in Confluence that is sortable

Question

I'm creating a page in a Confluence system that does a AJAX call and constructs a table on the page. So you get the idea, the code below is an example of code that would be put into the HTML Confluence macro:

<script type="text/javascript">
function getData() {
  AJS.$.ajax({
    url : "https://example.com/api/v1.0.0/report/output",
    cache : true,
    dataType : "jsonp",
    success : function(data) {
      populateReport(data);
    }
  });
}
function populateReport(data) {
    var html = "<div class=\"table-wrap\"><table id=\"dcinfoScoreboardTable\" class=\"confluenceTable tablesorter\"><thead><tr class=\"sortableHeader\">";
    html += "<th class=\"confluenceTh sortableHeader\"><div class=\"tablesorter-header-inner\">Case Number</div></th>";
    html += "<th class=\"confluenceTh sortableHeader\"><div class=\"tablesorter-header-inner\">Description</div></th>";
    html += "<th class=\"confluenceTh sortableHeader\"><div class=\"tablesorter-header-inner\">Priority</div></th>";
    html += "<th class=\"confluenceTh sortableHeader\"><div class=\"tablesorter-header-inner\">Status</div></th>";
    html += "</tr></thead><tbody>";
    for (var key in data.records) {
      html += "<tr>";
      html += "<td class=\"confluenceTd\">" + data.records[key].CaseNumber + "</td>";
      html += "<td class=\"confluenceTd\">" + data.records[key].Description + "</td>";
      html += "<td class=\"confluenceTd\">" + data.records[key].Priority + "</td>";
      html += "<td class=\"confluenceTd\">" + data.records[key].Status + "</td>";
      html += "</tr>";
    }
    html += '</tbody></table></div>';
    AJS.$('#Report').append(html);
    AJS.$('#LoadingMsg').css("display","none");
}
getData();
</script>
<style>
    #LoadingMsg {font-weight:bold;font-size:1.5em;}
    .confluenceTable {width:100%;}
</style>
<div id="Report">
    <span id="LoadingMsg">Loading table...</span>
</div>

The problem I'm having is that the table I just created is not sortable like the ones you would create in the editor. You can see I've even inspected the elements on current tables and added various CSS and element wrappers based on what I've seen on other tables but with no luck.

Is there a way to get this dynamically created table to use the sort functionality of the default Confluence tables?

Answer 1

You need to initialize the tablesorter jQuery plugin. This is done automatically if the table is available on page load, but that is not your case.

AJS.$('#dcinfoScoreboardTable').tablesorter(); //call right after. 

AJS.$('#LoadingMsg').css("display","none");  //Should do the trick for you.

For more info about sortable tables see http://tablesorter.com/docs/