🆕 Sorting in the Network tables #713
Some checks are pending
docker / docker_dev (push) Waiting to run

This commit is contained in:
jokob-sk
2024-06-23 10:45:15 +10:00
parent 01e97e152c
commit a030912f48
3 changed files with 65 additions and 11 deletions

View File

@@ -1238,6 +1238,13 @@ input[readonly] {
/* background-color:red; */
}
.sort-btn {
right: 5px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
}
/* ----------------------------------------------------------------- */

View File

@@ -270,6 +270,43 @@ function copyToClipboard(buttonElement) {
}
}
// -----------------------------------------------------------------------------
// Simple Sortable Table columns
// -----------------------------------------------------------------------------
function sortColumn(element) {
var th = $(element).closest('th');
var table = th.closest('table');
var columnIndex = th.index();
var ascending = !th.data('asc');
sortTable(table, columnIndex, ascending);
th.data('asc', ascending);
}
function sortTable(table, columnIndex, ascending) {
var tbody = table.find('tbody');
var rows = tbody.find('tr').toArray().sort(comparer(columnIndex));
if (!ascending) {
rows = rows.reverse();
}
for (var i = 0; i < rows.length; i++) {
tbody.append(rows[i]);
}
}
function comparer(index) {
return function(a, b) {
var valA = getCellValue(a, index);
var valB = getCellValue(b, index);
return $.isNumeric(valA) && $.isNumeric(valB) ? valA - valB : valA.localeCompare(valB);
};
}
function getCellValue(row, index) {
return $(row).children('td').eq(index).text();
}
// -----------------------------------------------------------------------------
// initialize
// -----------------------------------------------------------------------------

View File

@@ -7,6 +7,7 @@
define('badge_offline', '<div class="badge bg-red text-white" style="width: 60px;">Offline</div>');
define('circle_online', '<div class="badge bg-green text-white" style="width: 10px; height: 10px; padding:2px; margin-top: -25px;">&nbsp;</div>');
define('circle_offline', '<div class="badge bg-red text-white" style="width: 10px; height: 10px; padding:2px; margin-top: -25px;">&nbsp;</div>');
define('sortable_column', ' <span class="sort-btn" onclick="sortColumn(this)"><i class="fa-solid fa-arrow-up-short-wide"></i></span>');
?>
@@ -140,13 +141,18 @@
';
$str_table = ' <table class="table table-striped">
<thead>
<tr>
<th class="col-sm-1" >Port</th>
<th class="col-sm-1" >'.lang('Network_Table_State').'</th>
<th class="col-sm-2" >'.lang('Network_Table_Hostname').sortable_column.'</th>
<th class="col-sm-1" >'.lang('Network_Table_IP').sortable_column.'</th>
<th class="col-sm-3" >'.lang('Network_ManageLeaf').'</th>
</tr>
</thead>
<tbody>
<tr>
<th class="col-sm-1" >Port</th>
<th class="col-sm-1" >'.lang('Network_Table_State').'</th>
<th class="col-sm-2" >'.lang('Network_Table_Hostname').'</th>
<th class="col-sm-1" >'.lang('Network_Table_IP').'</th>
<th class="col-sm-3" >'.lang('Network_ManageLeaf').'</th>
</tr>';
// Prepare Array for Devices with Port value
@@ -383,13 +389,18 @@
<i class="fa fa-laptop"></i> '.lang('Network_UnassignedDevices').'
</h3>
<table class="table table-striped">
<thead>
<tr>
<th class="col-sm-1" ></th>
<th class="col-sm-1" >'.lang('Network_Table_State').'</th>
<th class="col-sm-2" >'.lang('Network_Table_Hostname').sortable_column.'</th>
<th class="col-sm-1" >'.lang('Network_Table_IP').sortable_column.'</th>
<th class="col-sm-3" >'.lang('Network_Assign').'</th>
</tr>
</thead>
<tbody>
<tr>
<th class="col-sm-1" ></th>
<th class="col-sm-1" >'.lang('Network_Table_State').'</th>
<th class="col-sm-2" >'.lang('Network_Table_Hostname').'</th>
<th class="col-sm-1" >'.lang('Network_Table_IP').'</th>
<th class="col-sm-3" >'.lang('Network_Assign').'</th>
</tr>';
$str_table_rows = "";
@@ -852,7 +863,6 @@
// init Assign/Unassign buttons
initButtons()
</script>