We help IT Professionals succeed at work.
Get Started
Troubleshooting Question

MVC: Show all data without filters in Javascript

jwebster77
jwebster77 asked
on
33 Views
Last Modified: 2020-08-31
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>
<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 = "";
        }





Comment
Watch Question
This problem has been solved!
Unlock 1 Answer and 3 Comments.
See Answer
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant

An Experts Exchange subscription includes unlimited access to online courses.

Get Started
Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE