Remove filter from table (JS)

Question

I have table to filter

Here is table

<table id="table" class="table" style="width: 100%">

            <tbody id="findings" style="overflow-y: scroll;">
            @foreach (var item in Model)
            {
                <tr>
                    <td class="point">
                        @(rowNo += 1)
                    </td>
                    <td style="display: none" id="patientId" class="title">
                        @Html.DisplayFor(modelItem => item.Patient_id)
                    </td>
                    <td class="title">
                        @Html.DisplayFor(modelItem => item.Start_appointment)
                    </td>
                    <td id="nameVal" class="title">
                        @Html.DisplayFor(modelItem => item.Patient.Name)
                    </td>
                    <td id="nameVal" class="title">
                        @Html.DisplayFor(modelItem => item.Doctor.First_Name)
                    </td>
                    <td class="title">
                        <img src="@item.Calculation.CalculationStatus"/>
                    </td>
                    <td class="title" style="display:none" id ="status">
                        @Html.DisplayFor(modelItem => item.Calculation.Status)
                    </td>
                    <td class="title">
                        <img style="width: 30px; height: 30px;" class="masters_data" src="~/images/icons8-Document-30.png"/>
                    </td>
                </tr>
            }
            </tbody>
        </table>

I want to filter it by button pressing.

So I wrote this method

Here is code of method:

 $('.not-filled-button').click(function() {
    statusFilter(this);
});


function statusFilter(element) {
    var $rows = $('#findings tr');
    var status = $.trim($(element).get(0).id).toLowerCase();
    $rows.show().filter(function() {
        var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
        return !~text.indexOf(status);
    }).hide();
}

Filtering is working good.

But I want to clear all filters and show all data as before filter.

How I can remove filter by js?

Thank's for help.

Answer 1

function showAll(){
    var $rows = $('#findings tr');
  $rows.show();
}

Call this function when you wanna remove the filter.

Eg. <button id="clearFilter">Clear filter</button>

Add this to HTML:

<button id="clearFilter">Clear filter</button>

and this to JS:

function showAll(){
    var $rows = $('#findings tr');
  $rows.show();
}

var buttonClearFilter = $('#clearFilter);
buttonClearFilter.click(showaAll);