I have a table with select boxes in the table headers that filter the rows. This is a large table, and filtering on a text column with long strings can take some time. I'd like an overlay to appear while the filtering is going on and hide it when the filtering is done.
$('#budget-table select').change(e => {
$('#overlay').show()
// get the selected options of all the filters at the top.
const filters = $('#budget-table th select').find(':selected').map((ind, elt) => elt.innerText)
$(`#budget-table tr`).each((trInd, trElt) => {
if (trInd == 0) return true // skip the header row
let showRow = true
// If the filter is not 'All' and the cell value doesn't match the filter, hide the row.
$(trElt).children().each((tdInd, tdElt) => {
if (filters[tdInd] !== 'All' && filters[tdInd] !== tdElt.innerText) {
showRow = false
return false
}
})
showRow ? $(trElt).show() : $(trElt).hide()
})
$('#overlay').hide()
})#overlay {
background-color: #333;
display: none;
height: 100%;
left: 0;
opacity: 0.6;
position: fixed;
top: 0;
width: 100%;
z-index: 100;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="project-list">
<table class="table table-hover table-striped table-rwd" id="budget-table">
<tr>
<th>
<select class="filter-select" data-columnindex="0" id="filter-input-0">
<option>Option 1</option>
<option>Option 2</option>
<option>...</option>
<option>Option n</option>
</select>
<div>
Territory
</div>
</th>
<th>...several more filters with the same structure</th>
</tr>
<tr><td colspan="2">...several hundred rows of table data</td></tr>
</table>
</div>
<div id="overlay"> </div>The overlay isn't showing. However, if I move $('#overlay').show() to after the outer each() function, the overlay will show. What am I missing?
The each loop will run asynchronously. To wait for the loop to finish, make the change callback asynchronous and add await before the each loop.
$('#budget-table select').change(async e => {
$('#overlay').show()
// get the selected options of all the filters at the top.
const filters = $('#budget-table th select').find(':selected').map((ind, elt) => elt.innerText)
$(`#budget-table tr`).each((trInd, trElt) => {
if (trInd == 0) return true // skip the header row
let showRow = true
// If the filter is not 'All' and the cell value doesn't match the filter, hide the row.
await $(trElt).children().each((tdInd, tdElt) => {
if (filters[tdInd] !== 'All' && filters[tdInd] !== tdElt.innerText) {
showRow = false
return false
}
})
showRow ? $(trElt).show() : $(trElt).hide()
})
// artificial delay
await new Promise(r => setTimeout(r, 500));
$('#overlay').hide()
})#overlay {
background-color: #333;
display: none;
height: 100%;
left: 0;
opacity: 0.6;
position: fixed;
top: 0;
width: 100%;
z-index: 100;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="project-list">
<table class="table table-hover table-striped table-rwd" id="budget-table">
<tr>
<th>
<select class="filter-select" data-columnindex="0" id="filter-input-0">
<option>Option 1</option>
<option>Option 2</option>
<option>...</option>
<option>Option n</option>
</select>
<div>
Territory
</div>
</th>
<th>...several more filters with the same structure</th>
</tr>
<tr>
<td colspan="2">...several hundred rows of table data</td>
</tr>
</table>
</div>
<div id="overlay"> </div>