使用復選框按列過濾

Question

我希望能夠使用復選框過濾數據表。

@{
    var schools = CurrentPage.Children.OrderBy("kommun");
}
<dl class="dropdown">

                <dt>
                    <a href="#">
                        <span class="hida">Select</span>
                        <p class="multiSel"></p>
                    </a>
                </dt>

                <dd>
                    <div class="mutliSelect">
                        <ul>
                            <li>
                                <input type="checkbox" value="Linköping" />Linköping
                            </li>
                            <li>
                                <input type="checkbox" value="Norrköping" />Norrköping
                            </li>
                            <li>
                                <input type="checkbox" value="Mjölby" />Mjölby
                            </li>
                        </ul>
                    </div>
                </dd>
                <button>Filter</button>
            </dl>

            <div id="no-more-tables" class="sorttable">

                <table>
                    <thead>
                        <tr>
                            <th style="width: 15%;" data-sort-initial="true">
                                Kommun
                            </th>
                            <th style="width: 20%;">
                                Skola
                            </th>
                            <th style="width: 15%;">
                                Datum
                            </th>
                            <th style="width: 15%;" data-sort-ignore="true">
                                Tid
                            </th>
                            <th style="width: 20%;" data-sort-ignore="true">
                                Adress
                            </th>
                            <th style="width: 15%;" data-sort-ignore="true">
                                Övrigt
                            </th>
                        </tr>
                    </thead>

                    <tbody>

                        @foreach (var school in schools)
                        {
                            var times = school.Children.Where("date > DateTime.Now.Date").OrderBy("date");

                            foreach (var time in times)
                            {
                        <tr>
                            <td data-title="Kommun">
                                @if (!string.IsNullOrEmpty(school.kommun))
                                        {
                                        @school.kommun
                                        }
                                        else
                                        {
                                        <text>&nbsp;</text>
                                        }
                            </td>
                            <td data-title="Skola">
                                @if (!string.IsNullOrEmpty(school.Name))
                                        {
                                        @school.Name
                                        }
                                        else
                                        {
                                        <text>&nbsp;</text>
                                        }
                            </td>
                            <td data-title="Datum">
                                @if (time.date != null)
                                        {
                                        @time.date.ToString("yyyy-MM-dd")
                                        }
                                        else
                                        {
                                        <text>&nbsp;</text>
                                        }
                            </td>
                            <td data-title="Tid">
                                @if (!string.IsNullOrEmpty(time.time))
                                        {
                                        @time.time
                                        }
                                        else
                                        {
                                        <text>&nbsp;</text>
                                        }
                            </td>
                            <td data-title="Adress">
                                @if (!string.IsNullOrEmpty(school.adress))
                                        {
                                        @school.adress
                                        }
                                        else
                                        {
                                        <text>&nbsp;</text>
                                        }
                            </td>
                            <td data-title="Övrigt">
                                @if (!string.IsNullOrEmpty(school.oevrigt.ToString()))
                                {
                                    @school.oevrigt
                                }
                                else
                                {
                                    <text>&nbsp;</text>
                                }
                            </td>

                        </tr>
                            }
                        }

                    </tbody>
                </table>

我從這里去哪里？ 我以前從未使用過過濾器，但是我假設我必須使用數據表檢查過濾器中的值。 我也知道我也需要JavaScript，因為我不希望用戶每次選擇過濾器時都重新加載頁面。

我將不勝感激任何幫助

Answer 1

僅使用JavaScript

 /* Demo filtering table using checkboxes. Filters against first td value */ /* Demo filtering table using checkboxes. Filters against first td value */ /* Set 'ready' handler' */ document.addEventListener('DOMContentLoaded', initFunc); /* When document ready, set click handlers for the filter boxes */ function initFunc(event) { var filters = document.getElementsByName('tablefilter'); for (var i = 0; i < filters.length; i++) { filters[i].addEventListener('click', buildAndExecFilter); } } /* This function gets called when clicking on table filter checkboxes. It builds a list of selected values and then filters the table based on that */ function buildAndExecFilter() { var show = []; var filters = document.getElementsByName('tablefilter'); for (var i = 0; i < filters.length; i++) { if (filters[i].checked) { show.push(filters[i].value); } } execFilter(show); // Filter based on selected values } function execFilter(show) { /* For all rows of table, see if td 0 contains a selected value to filter */ var rows = document.getElementById('tablebody').getElementsByTagName('tr'); for (var i = 0; i < rows.length; i++) { var display = ""; // Default to display // If it is not found in the selected filter values, don't show it if (show.indexOf(rows[i].children[0].textContent) === -1) { display = "none"; } // Update the display accordingly rows[i].style.display = display; } } 

 <input name='tablefilter' type='checkbox' value='1' id='tablefilter1' checked/> <label for='tablefilter1'>1</label> <input name='tablefilter' type='checkbox' value='2' id='tablefilter2' checked/> <label for='tablefilter2'>2</label> <input name='tablefilter' type='checkbox' value='3' id='tablefilter3' checked/> <label for='tablefilter3'>3</label> <table> <thead> <tr> <th>Col1</th> <th>Col2</th> <th>Col3</th> </tr> </thead> <tbody id='tablebody'> <tr> <td>1</td> <td>One</td> <td>First</td> </tr> <tr> <td>2</td> <td>Two</td> <td>Second</td> </tr> <tr> <td>3</td> <td>Three</td> <td>Third</td> </tr> </tbody> </table>