mirror of
https://github.com/jokob-sk/NetAlertX.git
synced 2025-12-07 01:26:11 -08:00
🆕 Sorting in the Network tables #713
Some checks are pending
docker / docker_dev (push) Waiting to run
Some checks are pending
docker / docker_dev (push) Waiting to run
This commit is contained in:
@@ -1238,6 +1238,13 @@ input[readonly] {
|
||||
/* background-color:red; */
|
||||
}
|
||||
|
||||
.sort-btn {
|
||||
|
||||
right: 5px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
/* ----------------------------------------------------------------- */
|
||||
|
||||
@@ -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
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
@@ -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;"> </div>');
|
||||
define('circle_offline', '<div class="badge bg-red text-white" style="width: 10px; height: 10px; padding:2px; margin-top: -25px;"> </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>
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user