I'm currently developing a table view to visualize and change warehouse stocks. Requirements are the following: sortable, searchable and navigation by side buttons (fast up, up, down, fast down). So I implemented the table and filled it with data. Sorting and searching itself works fine, but when it comes to the navigation with an active search keyword, the controls are messed up.
The search function works as the following: I'm iterating trough the table rows and I ".hide()" all the rows which don't match the keyword condition. But now, since the table row indezes remain unchanged, my navigation is messed up.
EDIT: Here a fiddle of my search function and the navigation buttons for better understanding:
$(document).ready(function (e) {
var currPos = 0;
refreshFocused();
$('.table-articles-row').click(function() {
currPos = $(this).index();
refreshFocused();
});
$('#btn-fast-up').click(function() {
var firstVisible = $('.table-articles-row:visible:first');
currPos = $(firstVisible).index();
refreshFocused();
});
$('#btn-up').click(function() {
var above = $('.active').closest('.table-articles-row').prevAll('.table-articles-row:visible').first();
currPos = $(above).index();
refreshFocused();
});
$('#btn-down').click(function() {
var beneath = $('.active').closest('.table-articles-row').nextAll('.table-articles-row:visible').first();
currPos = $(beneath).index();
refreshFocused();
});
$('#btn-fast-down').click(function() {
var lastVisible = $('.table-articles-row:visible:last');
currPos = $(lastVisible).index();
refreshFocused();
});
$("#btn-search").click(function () {
var value = $("#ed-search").val();
$(".table-articles-row").filter(function () {
$(this).toggle($(this).text().toLowerCase().indexOf(value.toLowerCase()) > -1);
});
currPos = 0;
refreshFocused();
});
function refreshFocused() {
$('.table-articles-row').removeClass('active');
var focusedRow = $('.table-articles-row:visible').eq(currPos);
focusedRow.addClass('active');
$(focusedRow)[0].scrollIntoView({
behavior: "smooth",
block: "center"
});
}
});* {
font-family: 'Calibri';
}
html, body {
overflow: hidden;
background: lightgray;
}
.table-wrapper {
width: 50vh;
margin: 20vh auto;
height: 40vh;
background: lightgray;
}
.table-content {
width: 40vh;
height: 30vh;
float: left;
background: lightgreen;
overflow: hidden;
}
.table {
width: 40vh;
}
.table thead th {
position: sticky;
top: 0;
background: rgba(255,255,255,1) !important;
padding: 0;
height: 7.5vh;
border: 1px solid lightgreen;
}
.table tbody td {
background: rgba(79,129,12,0.5) !important;
padding: 0;
height: 2.5vh;
}
.table-controls {
width: 10vh;
height: 30vh;
float: left;
}
.table-nav-btn {
width:10vh;
height: 7.5vh;
background: #fff;
border: 1px solid lightgreen;
font-weight: bold;
}
.table-search {
width: 50vh;
height: 10vh;
float: left;
background: #fff;
border: 1px solid lightgreen;
border-radius: 5px/5px;
text-align: center;
}
.search-text-input,
.search-confirm-btn {
width: 100%;
height: 5vh;
text-align: center;
}
.search-confirm-btn {
background: lightgreen;
border: none;
}
.active {
background: rgba(79,129,12,0.8) !important;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="table-wrapper">
<div class="table-content">
<table class="table">
<thead>
<tr class="table-head-row">
<th class="table-head-col">Beschreibung</th>
<th class="table-head-col">Anzahl</th>
<th class="table-head-col">Maßeinheit</th>
<th class="table-head-col">Preis</th>
</tr>
</thead>
<tbody>
<tr class="table-articles-row">
<td class="table-articles-col">Beer</td>
<td class="table-articles-col">2,00</td>
<td class="table-articles-col">Bot.</td>
<td class="table-articles-col">1,90</td>
</tr>
<tr class="table-articles-row">
<td class="table-articles-col">Ice cream</td>
<td class="table-articles-col">4,00</td>
<td class="table-articles-col">Pc.</td>
<td class="table-articles-col">1,30</td>
</tr>
<tr class="table-articles-row">
<td class="table-articles-col">Golden Toast</td>
<td class="table-articles-col">6,00</td>
<td class="table-articles-col">Pck.</td>
<td class="table-articles-col">0,60</td>
</tr>
<tr class="table-articles-row">
<td class="table-articles-col">Fit Toast</td>
<td class="table-articles-col">4,00</td>
<td class="table-articles-col">Pck.</td>
<td class="table-articles-col">0,79</td>
</tr>
<tr class="table-articles-row">
<td class="table-articles-col">Root beer</td>
<td class="table-articles-col">10,00</td>
<td class="table-articles-col">Bot.</td>
<td class="table-articles-col">3,50</td>
</tr>
<tr class="table-articles-row">
<td class="table-articles-col">Snack Sausage</td>
<td class="table-articles-col">5,00</td>
<td class="table-articles-col">Pc.</td>
<td class="table-articles-col">3,90</td>
</tr>
<tr class="table-articles-row">
<td class="table-articles-col">Bacon</td>
<td class="table-articles-col">12,00</td>
<td class="table-articles-col">Pck.</td>
<td class="table-articles-col">2,20</td>
</tr>
<tr class="table-articles-row">
<td class="table-articles-col">Coca Cola 0,25l</td>
<td class="table-articles-col">24,00</td>
<td class="table-articles-col">Bot.</td>
<td class="table-articles-col">1,30</td>
</tr>
<tr class="table-articles-row">
<td class="table-articles-col">Fanta 0,25L</td>
<td class="table-articles-col">21,00</td>
<td class="table-articles-col">Bot.</td>
<td class="table-articles-col">1,30</td>
</tr>
<tr class="table-articles-row">
<td class="table-articles-col">Sprite 0,25L</td>
<td class="table-articles-col">12,00</td>
<td class="table-articles-col">Bot.</td>
<td class="table-articles-col">1,30</td>
</tr>
<tr class="table-articles-row">
<td class="table-articles-col">Hawaii Toast Set</td>
<td class="table-articles-col">8,00</td>
<td class="table-articles-col">Pck.</td>
<td class="table-articles-col">10,89</td>
</tr>
<tr class="table-articles-row">
<td class="table-articles-col">Root Beer Plus</td>
<td class="table-articles-col">4,00</td>
<td class="table-articles-col">Bot.</td>
<td class="table-articles-col">4,20</td>
</tr>
<tr class="table-articles-row">
<td class="table-articles-col">Snack Cheese Stick</td>
<td class="table-articles-col">9,00</td>
<td class="table-articles-col">Pc.</td>
<td class="table-articles-col">0,90</td>
</tr>
<tr class="table-articles-row">
<td class="table-articles-col">McKenzy Fries</td>
<td class="table-articles-col">2,00</td>
<td class="table-articles-col">Pck.</td>
<td class="table-articles-col">3,40</td>
</tr>
<tr class="table-articles-row">
<td class="table-articles-col">Jalapenos</td>
<td class="table-articles-col">17,00</td>
<td class="table-articles-col">Jar.</td>
<td class="table-articles-col">4,70</td>
</tr>
<tr class="table-articles-row">
<td class="table-articles-col">Ketchup</td>
<td class="table-articles-col">12,00</td>
<td class="table-articles-col">Pck.</td>
<td class="table-articles-col">0,35</td>
</tr>
<tr class="table-articles-row">
<td class="table-articles-col">Mustard</td>
<td class="table-articles-col">7,00</td>
<td class="table-articles-col">Pck.</td>
<td class="table-articles-col">0,35</td>
</tr>
<tr class="table-articles-row">
<td class="table-articles-col">Pizza</td>
<td class="table-articles-col">19,00</td>
<td class="table-articles-col">Pc.</td>
<td class="table-articles-col">2,79</td>
</tr>
<tr class="table-articles-row">
<td class="table-articles-col">Playing cards</td>
<td class="table-articles-col">3,00</td>
<td class="table-articles-col">Pck.</td>
<td class="table-articles-col">5,80</td>
</tr>
<tr class="table-articles-row">
<td class="table-articles-col">Marlboro 27 pc.</td>
<td class="table-articles-col">12,00</td>
<td class="table-articles-col">Pck.</td>
<td class="table-articles-col">8,00</td>
</tr>
</tbody>
</table>
</div>
<div class="table-controls">
<button id="btn-fast-up" class="table-nav-btn">Fast up</button>
<button id="btn-up" class="table-nav-btn">Up</button>
<button id="btn-down" class="table-nav-btn">Down</button>
<button id="btn-fast-down" class="table-nav-btn">Fast Down</button>
</div>
<div class="table-search">
<input id="ed-search" type="search" class="search-text-input" placeholder="Search ..."/>
<input id="btn-search" type="button" class="search-confirm-btn" value="Apply search"/>
</div>
</div>The html table markup is pretty simple. Just a normal table markup with table, thead, tr, th, tbody, tr and td. Nothing special.
Does anybody have an idea how to "ignore" the invisible items properly or maybe redevelop the navigation buttons to ensure a correct navigation over the rows even if a search is active?
Best regards
