feat: improve table search functionality in statistics view by implementing data attribute matching, enhancing accuracy and user experience
This commit is contained in:
@@ -3867,7 +3867,7 @@
|
||||
return;
|
||||
}
|
||||
|
||||
var searchTerm = component.search.toLowerCase();
|
||||
var searchTerm = component.search.toLowerCase().trim();
|
||||
|
||||
// Get all tbody elements in the table
|
||||
var allTbodies = [];
|
||||
@@ -3884,6 +3884,37 @@
|
||||
|
||||
var mainTbody = allTbodies[0];
|
||||
|
||||
// Helper function to check if a row matches the search term
|
||||
// Uses data-* attributes for accurate matching instead of textContent
|
||||
// (textContent includes hidden modal content causing false positives)
|
||||
function rowMatchesSearch(row, term) {
|
||||
if (!term) return true;
|
||||
|
||||
// Define searchable data attributes for each table type
|
||||
var searchableAttrs = [];
|
||||
|
||||
if (tableId === 'network-connections-table') {
|
||||
// Active Connections table
|
||||
searchableAttrs = ['direction', 'protocol', 'source', 'destination', 'state'];
|
||||
} else if (tableId === 'top-peers-table') {
|
||||
// Top Peers table
|
||||
searchableAttrs = ['endpoint', 'port'];
|
||||
} else if (tableId === 'top-ports-table') {
|
||||
// Top Ports table
|
||||
searchableAttrs = ['port'];
|
||||
}
|
||||
|
||||
// Search in defined data attributes
|
||||
for (var i = 0; i < searchableAttrs.length; i++) {
|
||||
var attrValue = row.getAttribute('data-' + searchableAttrs[i]);
|
||||
if (attrValue && attrValue.toLowerCase().includes(term)) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
// Check if nested tbodies are children of mainTbody or siblings
|
||||
var nestedTbodiesInFirst = [];
|
||||
var firstTbodyChildren = mainTbody.children;
|
||||
@@ -3910,8 +3941,7 @@
|
||||
nestedTbodiesInFirst.forEach(function(tbody) {
|
||||
var row = tbody.querySelector('tr.table-row');
|
||||
if (row) {
|
||||
var text = row.textContent.toLowerCase();
|
||||
var matches = searchTerm === '' || text.includes(searchTerm);
|
||||
var matches = rowMatchesSearch(row, searchTerm);
|
||||
tbody.style.display = matches ? '' : 'none';
|
||||
}
|
||||
});
|
||||
@@ -3922,8 +3952,7 @@
|
||||
var tbody = allTbodies[k];
|
||||
var row = tbody.querySelector('tr.table-row');
|
||||
if (row) {
|
||||
var text = row.textContent.toLowerCase();
|
||||
var matches = searchTerm === '' || text.includes(searchTerm);
|
||||
var matches = rowMatchesSearch(row, searchTerm);
|
||||
tbody.style.display = matches ? '' : 'none';
|
||||
}
|
||||
}
|
||||
@@ -3931,8 +3960,7 @@
|
||||
// Simple structure - rows directly in the first tbody
|
||||
var rows = mainTbody.querySelectorAll('tr.table-row');
|
||||
rows.forEach(function(row) {
|
||||
var text = row.textContent.toLowerCase();
|
||||
var matches = searchTerm === '' || text.includes(searchTerm);
|
||||
var matches = rowMatchesSearch(row, searchTerm);
|
||||
row.style.display = matches ? '' : 'none';
|
||||
});
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user