Question

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

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

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

Answer 1

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

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

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

有关可排序表的详细信息，请参阅http://tablesorter.com/docs/

在Confluence中创建可排序的动态表

1 个答案: