mirror of https://github.com/CGAL/cgal
Use jQuery TableSorter for sorting tables
This commit is contained in:
Nicolas Saillant
parent
de1872f46c
commit
58cf16de67
|
|
@ -179,23 +179,25 @@ function platformContainer(platforms) {
|
|||
$tplTable.toggle();
|
||||
}
|
||||
}).appendTo($container);
|
||||
const $tplTable = $('<table>', { class: 'tpl-table', css: { display: 'none' } }).appendTo($container);
|
||||
const $tplTable = $('<table>', {
|
||||
class: 'tablesorter',
|
||||
css: {
|
||||
display: 'none',
|
||||
maxWidth: '300px'
|
||||
}
|
||||
}).appendTo($container);
|
||||
const $thead = $('<thead>').appendTo($tplTable);
|
||||
const $tbody = $('<tbody>').appendTo($tplTable);
|
||||
const $headerRow = $('<tr>');
|
||||
$('<th>', { class: 'sortable', 'data-sort': 0, text: 'Library' }).appendTo($headerRow);
|
||||
$('<th>', { class: 'sortable', 'data-sort': 1, text: 'Version' }).appendTo($headerRow);
|
||||
$('<th>', { class: 'sortable', 'data-sort': 2, text: 'Status' }).appendTo($headerRow);
|
||||
$('<th>', { text: 'Library' }).appendTo($headerRow);
|
||||
$('<th>', { text: 'Version' }).appendTo($headerRow);
|
||||
$headerRow.appendTo($thead);
|
||||
tplArray.forEach(tpl => {
|
||||
$('<tr>').append(
|
||||
$('<td>').html(`<a href="#" class="tpl-link" data-tpl="${tpl.name}">${tpl.name}</a>`),
|
||||
$('<td>').text(tpl.version || 'N/A'),
|
||||
$('<td>').text(tpl.status)
|
||||
).appendTo($tbody);
|
||||
});
|
||||
initializeTableSorting($thead, $tbody);
|
||||
$thead.find('.sortable').first().click();
|
||||
$('.tpl-link').click(function(event) {
|
||||
event.preventDefault();
|
||||
const tplName = $(this).data('tpl');
|
||||
|
|
@ -268,7 +270,6 @@ function showVersionsForTPL(tplName) {
|
|||
<tr class="modal-table-row">
|
||||
<td>${platform.name}</td>
|
||||
<td>${matchingTPL.version || 'N/A'}</td>
|
||||
<td><strong>${matchingTPL.status}</strong></td>
|
||||
</tr>
|
||||
`);
|
||||
}
|
||||
|
|
@ -276,6 +277,7 @@ function showVersionsForTPL(tplName) {
|
|||
if (!tplFound) {
|
||||
$modalBody.append('<tr><td colspan="3">No versions of this TPL found across platforms.</td></tr>');
|
||||
}
|
||||
$modalTable.trigger("update");
|
||||
$modal.show();
|
||||
$('.close').click(function() {
|
||||
$modal.hide();
|
||||
|
|
@ -285,28 +287,6 @@ function showVersionsForTPL(tplName) {
|
|||
$modal.hide();
|
||||
}
|
||||
});
|
||||
const $thead = $modalTable.find('thead');
|
||||
initializeTableSorting($thead, $modalBody);
|
||||
$thead.find('.sortable').first().click();
|
||||
}
|
||||
|
||||
function initializeTableSorting($thead, $tbody) {
|
||||
let sortOrder = 1;
|
||||
$thead.find('.sortable').click(function() {
|
||||
const columnIndex = $(this).data('sort');
|
||||
const rows = $tbody.find('tr').get();
|
||||
rows.sort((a, b) => {
|
||||
const keyA = $(a).children('td').eq(columnIndex).text().toUpperCase();
|
||||
const keyB = $(b).children('td').eq(columnIndex).text().toUpperCase();
|
||||
if (keyA < keyB) return -1 * sortOrder;
|
||||
if (keyA > keyB) return 1 * sortOrder;
|
||||
return 0;
|
||||
});
|
||||
$.each(rows, (_index, row) => {
|
||||
$tbody.append(row);
|
||||
});
|
||||
sortOrder *= -1;
|
||||
});
|
||||
}
|
||||
|
||||
function main() {
|
||||
|
|
@ -319,7 +299,9 @@ function main() {
|
|||
platformContainer(data.platforms);
|
||||
packageContainer(data.platforms);
|
||||
$packageContainer.hide();
|
||||
|
||||
$(document).ready(function() {
|
||||
$("table.tablesorter").tablesorter();
|
||||
});
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const platform = urlParams.get('platform');
|
||||
if (platform) {
|
||||
|
|
|
|||
|
|
@ -838,6 +838,7 @@ sub create_summary_page {
|
|||
<title>Summary</title>
|
||||
<link rel="shortcut icon" href="cgal.ico">
|
||||
<link rel="stylesheet" type="text/css" href="testresult.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.3/css/theme.default.min.css">
|
||||
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
||||
<script>
|
||||
var searchURLs = $json_urls;
|
||||
|
|
@ -849,15 +850,14 @@ sub create_summary_page {
|
|||
<div class="modal-content">
|
||||
<span class="close">×</span>
|
||||
<h2 id="tplModalTitle">Versions of TPL</h2>
|
||||
<table class="modaltable">
|
||||
<table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="modalHeader sortable" data-sort="0">Platform</th>
|
||||
<th class="modalHeader sortable" data-sort="1">Version</th>
|
||||
<th class="modalHeader sortable" data-sort="2">Status</th>
|
||||
<th>Platform</th>
|
||||
<th>Version</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="modalBody"></tbody>
|
||||
<tbody></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -891,6 +891,7 @@ sub create_summary_page {
|
|||
<div id="package_container"></div>
|
||||
</div>
|
||||
<script src="$release_name/Summary_Script.js" type="application/javascript"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.32.0/js/jquery.tablesorter.min.js"></script>
|
||||
EOF
|
||||
if (-e $summary_script_src) {
|
||||
copy($summary_script_src, $summary_script_dest) or die "Copy failed: $!";
|
||||
|
|
|
|||
|
|
@ -170,11 +170,6 @@ TABLE.result TD > a.package_name {
|
|||
color: #1A0DAB;
|
||||
}
|
||||
|
||||
.sortable{
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* TPL Modal */
|
||||
.modal {
|
||||
display: none;
|
||||
|
|
@ -222,24 +217,51 @@ TABLE.result TD > a.package_name {
|
|||
color: #555;
|
||||
}
|
||||
|
||||
.modaltable{
|
||||
table.tablesorter {
|
||||
width: 100%;
|
||||
margin: 20px 0;
|
||||
border-collapse: collapse;
|
||||
cellspacing: 0;
|
||||
background-color: #f0f0f0;
|
||||
color: #333;
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
|
||||
.modalHeader{
|
||||
text-align: center;
|
||||
width: auto;
|
||||
table.tablesorter thead th {
|
||||
background-color: #d9d9d9;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
padding: 10px;
|
||||
border: 1px solid #ccc;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.modalBody {
|
||||
text-align: center;
|
||||
table.tablesorter thead th.tablesorter-headerAsc {
|
||||
background-repeat: no-repeat;
|
||||
background-position: right center;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.modal-table-row {
|
||||
border-bottom: 2px ridge #000;
|
||||
table.tablesorter thead th.tablesorter-headerDesc {
|
||||
background-repeat: no-repeat;
|
||||
background-position: right center;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.modal-table-row td {
|
||||
padding: 7px;
|
||||
}
|
||||
table.tablesorter tbody tr:nth-child(odd) {
|
||||
background-color: #e6e6e6;
|
||||
}
|
||||
|
||||
table.tablesorter tbody tr:nth-child(even) {
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
|
||||
table.tablesorter tbody td {
|
||||
padding: 8px;
|
||||
border: 1px solid #ccc;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
table.tablesorter tbody tr:hover {
|
||||
background-color: #d1d1d1
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue