Javascript 在可排序的汇流中创建动态表

我正在Confluence系统中创建一个页面，它执行AJAX调用并在页面上构造一个表。下面的代码是将放入HTML Confluence宏的代码示例：

<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>

函数getData（）{
AJS.$.ajax({
url:“https://example.com/api/v1.0.0/report/output",
是的，
数据类型：“jsonp”，
成功：功能（数据）{
人口报告（数据）；
}
});
}
函数populateReport（数据）{
var html=“”；
html+=“案例编号”；
html+=“说明”；
html+=“优先级”；
html+=“状态”；
html+=“”；
for（数据记录中的var键）{
html+=“”；
html+=“”+数据。记录[键]。案例编号+“”；
html+=“”+数据。记录[key]。说明+“”；
html+=“”+数据。记录[键]。优先级+“”；
html+=“”+数据。记录[键]。状态+“”；
html+=“”；
}
html+=''；
AJS.$（“#报告”）.append（html）；
AJS.$（'#LoadingMsg'）.css（“显示”、“无”）；
}
getData（）；
#加载消息{字体大小：粗体；字体大小：1.5em；}
.Confluencable{宽度：100%；}
加载表。。。

我遇到的问题是，我刚刚创建的表不像您在编辑器中创建的表那样可排序。您可以看到，我甚至检查了当前表上的元素，并根据我在其他表上看到的内容添加了各种CSS和元素包装器，但运气不好

---

有没有办法让这个动态创建的表使用默认Confluence表的排序功能？

您需要初始化tablesorter jQuery插件。如果表格在页面加载时可用，则会自动执行此操作，但情况并非如此

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

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

---

有关可排序表的更多信息，请参见

。我以为我也尝试过类似的事情，但显然我以前做错了。谢谢