使用复选框

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

＆＃13;

＆＃13;

/* 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;
  }
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;