Фильтр таблицы с использованием ul

Question

Я хочу отфильтровать свою таблицу, используя ul onclick, но я не знаю как.С чего мне начать?

Снимок экрана

Вот мой код:

<ul class="nav nav-tabs">
    @foreach (var DormName in Model.Select(s => s.DormName).Distinct().ToArray())
    {
        <li id="lol";><a href="#tab_1" data-toggle="tab">@DormName</a></li>
    }
    <li class="pull-right"><a href="#" class="text-muted"><i class="fa fa-gear"></i></a></li>
</ul>

А вот и моя таблица.Я хочу отфильтровать его, используя li (Dorm Name).Я не могу отфильтровать таблицу, используя input = text, но я не могу отфильтровать ее, используя ul.

<table class="table table-hover" id="TableCalendar">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.DormName)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.RoomNumber)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.BedNumber)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.GuestName)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Classification)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Gender)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.CheckIn)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.CheckOut)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.StatusType)
        </th>
        <th>Action</th>
    </tr>
    <tbody id="MyTable">
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.DormName)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.RoomNumber)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.BedNumber)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.GuestName)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Classification)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Gender)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.CheckIn)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.CheckOut)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.StatusType)
                </td>

                <td>
                    @Html.ActionLink("Edit", "GenaralUpdate", "Reservation", new { item.DormName, item.RoomNumber, item.BedNumber }, new
               {
                   data_target = "#myModal",

                   data_toggle = "modal"
               })   <i class="fa fa-pencil" aria-hidden="true"></i>
                </td>
            </tr>
        }
    </tbody>
</table>