jwebster77
asked on
MVC: Show all data without filters in Javascript
Hello,
I have a table that gets filtered by entering text in a couple of input texts and then using Javascript. There is a reset filter button that when clicked it clears out the text in the filters but the data showing is still the filtered one. Actually if I hit enter in the input box then all data is shown, as I would like to.
How can I either make the reset button show all data, not filtered, or is there some code to get rid of the filtered results and instead show all data when there is no text in the input boxes? The latter would be preferable. Thank you.
HTML
JAVASCRIPT
I have a table that gets filtered by entering text in a couple of input texts and then using Javascript. There is a reset filter button that when clicked it clears out the text in the filters but the data showing is still the filtered one. Actually if I hit enter in the input box then all data is shown, as I would like to.
How can I either make the reset button show all data, not filtered, or is there some code to get rid of the filtered results and instead show all data when there is no text in the input boxes? The latter would be preferable. Thank you.
HTML
<p><input type="text" id="filterAllInput" onkeyup="FilterAllFunction()" placeholder="Filter Entire Table" title="Filter Entire Table"></p>
<input type="text" id="myStatusInput" onkeyup="statusFilterFunction()" placeholder="Filter Status" title="Status filter">
<p class="w3-center"><button id="buttonReset" onclick="performReset()" class="w3-button w3-grey w3-hover-light-grey">Reset Filters</button></p>
JAVASCRIPT
//FILTER ALL TABLE FILTER
function FilterAllFunction() {
var input, filter, table, tr, td, cell, i, j;
input = document.getElementById("filterAllInput");
filter = input.value.toUpperCase();
table = document.getElementById("ITTasksTable");
tr = table.getElementsByTagName("tr");
for (i = 1; i < tr.length; i++) {
// Hide the row initially.
tr[i].style.display = "none";
td = tr[i].getElementsByTagName("td");
for (var j = 0; j < td.length; j++) {
//Use next line if you want to filter every column, right now is only filtering Status
cell = tr[i].getElementsByTagName("td")[j];
if (cell) {
if (cell.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
break;
}
}
}
}
}
//STATUS COLUMN FILTER CONSIDERING ASSIGNED TO COLUMN FILTER AS WELL
function statusFilterFunction() {
var input, filter, inputAssign, filterAssign, table, tr, td, cell, cellAssign, i, j;
input = document.getElementById("myStatusInput");
filter = input.value.toUpperCase();
inputAssign = document.getElementById("myAssignedToInput");
filterAssign = inputAssign.value.toUpperCase();
table = document.getElementById("ITTasksTable");
tr = table.getElementsByTagName("tr");
for (i = 1; i < tr.length; i++) {
// Hide the row initially.
tr[i].style.display = "none";
td = tr[i].getElementsByTagName("td");
for (var j = 0; j < td.length; j++) {
//Use next line if you want to filter every column, right now is only filtering Status
cell = tr[i].getElementsByTagName("td")[7];
cellAssign = tr[i].getElementsByTagName("td")[3];
if (cell) {
if (cell.innerHTML.toUpperCase().indexOf(filter) > -1) {
if (cellAssign) {
if (cellAssign.innerHTML.toUpperCase().indexOf(filterAssign) > -1) {
tr[i].style.display = "";
break;
}
}
}
}
}
}
}
//RESET BTN
function performReset() {
document.getElementById("myAssignedToInput").value = "";
document.getElementById("myStatusInput").value = "";
document.getElementById("filterAllInput").value = "";
}
ASKER
Hi, I have used datatables before but I do not really liked them and at times I found them hard to work with. I would like either the reset button to work or just the filters when there is no text typed in them(and consequently show all data). Thank you
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
https://datatables.net/
Some examples in ASP.NET MVC:
https://www.aspsnippets.com/Articles/Using-jQuery-DataTables-in-ASPNet-MVC.aspx
https://www.c-sharpcorner.com/article/asp-net-mvc-jquery-server-side-datatable-example/
You need to change the return data to your needs.