Link to home
Start Free TrialLog in
Avatar of jwebster77
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
<p><input type="text" id="filterAllInput" onkeyup="FilterAllFunction()" placeholder="Filter Entire Table" title="Filter Entire Table"></p>

Open in new window

<input type="text" id="myStatusInput" onkeyup="statusFilterFunction()" placeholder="Filter Status" title="Status filter">

Open in new window

<p class="w3-center"><button id="buttonReset" onclick="performReset()" class="w3-button w3-grey w3-hover-light-grey">Reset Filters</button></p>

Open in new window


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 = "";
        }

Open in new window






Avatar of Miguel Oz
Miguel Oz
Flag of Australia image

My suggestion will be to use a free third party component called data table:
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.
Avatar of jwebster77
jwebster77

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
Avatar of jwebster77
jwebster77

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial