Создание динамической таблицы в Confluence, которая сортируется

Вопрос: Я создаю страницу в системе Confluence, которая выполняет вызов AJAX и создает таблицу на странице. Итак, вы поняли, что приведенный ниже код является примером кода, который будет помещен в макрос HTML Confluence: function getData() { AJS.$.ajax({ url : "https://example.com/api/v1.0.0/report/output", cache : true, dataType : "jsonp", success : function(data) { populateReport(data); } });

Вопрос:

Я создаю страницу в системе 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 по умолчанию?

Лучший ответ:

Вам нужно инициализировать плагин tablesorter jQuery. Это делается автоматически, если таблица доступна при загрузке страницы, но это не ваш случай.

AJS.$(‘#dcinfoScoreboardTable’).tablesorter(); //call right after. AJS.$(‘#LoadingMsg’).css(«display»,»none»); //Should do the trick for you.

Дополнительные сведения о сортируемых таблицах см. на странице http://tablesorter.com/docs/.

Оцените статью
Добавить комментарий