I have a list of items with assigned statuses (5 statuses in total), each displayed in a specific column. Above the list, I have buttons corresponding to each status.
My goal is to click on one of these buttons to filter the list and show only items with the selected status. There are 5 buttons for each status, plus an additional button labeled 'Total' which will display all data again.
Although I am using Bootstrap 4 and JavaScript, I'm struggling with the JavaScript logic.
Below you can find a snippet of my code:
$(document).ready(function() {
resStatusList();
$(".searchGo").click(function() {
var searchVal = $('#searchTotal').val();
if (searchVal == "") {
$('#searchroleName').addClass("alert");
} else {
$('#searchroleName').removeClass("alert");
}
});
var $rows = $('#resListTable tr');
$('#searchroleName').keyup(function() {
var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
$rows.show().filter(function() {
var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
return !~text.indexOf(val);
}).hide();
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="addRoleDiv">
<h4>Reservation List</h4>
<label>Click on a button to filter items</label><br>
<button class="btn searchGo btn-active" id="searchTotal">Total</button>
<button class="btn searchGo btn-success" id="searchExpected">Expected</button>
<button class="btn searchGo btn-danger" id="searchCancelled">Cancelled</button>
<button class="btn searchGo btn-warning" id="searchPartial">Partial</button>
<button class="btn searchGo btn-info" id="searchInhouse">Inhouse</button>
<button class="btn searchGo btn-active" id="searchFinished">Finished</button>
</div>
<div class="col-lg-12 col-md-12 col-xs-12 padding table-responsive">
<table class="table table-hover table-bordered" id="reservationListCheckIn">
<thead class="reservationTableHead">
<tr>
<th>ID</th>
<th>Name</th>
<th>Status</th>
</tr>
</thead>
<tbody id="resListTable">
<tr>
<td>864</td>
<td>Helen Fields</td>
<td>Expected</td>
</tr>
<tr>
<td>2435</td>
<td>Frank White</td>
<td>Cancelled</td>
</tr>
<tr>
<td>2343</td>
<td>Hugo Egon</td>
<td>Inhouse</td>
</tr>
<tr>
<td>245</td>
<td>Marc Jacobs</td>
<td>Partial</td>
</tr>
<tr>
<td>43</td>
<td>Julia Kline</td>
<td>Finished</td>
</tr>
</tbody>
</table>
</div>