将List.js与表和每列的过滤器框一起使用

Question

我正在尝试将List.js用作表的过滤器选项。我能够通过一个搜索框过滤一列，但我想要做的是为每列提供一个过滤器框。 这是表格的HTML：

<div id="myTable">
    <h1>My Table</h1>
    <div>
        <input class="search" placeholder="Filter ID" />
    </div>
    <table>
        <thead>
            <tr>
                <th id="cols" class="sortable" >ID</th>
                <th id="cols" class="sortable" >First Name</th>
                <th id="cols" class="sortable" >Last Name</th>
            </tr>
        </thead>
        <tbody class="list">
            <tr class="even">
                <td id="cols" class="id">12345</td>
                <td id="cols" class="firstName">Billy</td> 
                <td id="cols" class="lastName">Joe</td> 
            </tr>
        </tbody>
    </table>
</div>

这是JavaScript代码：

var options = {
     valueNames: ['id']
};
var userList = new List('myTable', options)

Answer 1

您只需使用List API search方法按id过滤列。

var searchInputs = document.querySelectorAll('input');
var options = {
  valueNames: ['id', 'firstName', 'lastName']
};
var userList = new List('myTable', options)

function search ( e ) {
  userList.search(this.value, e.target.dataset.searchType)
}

searchInputs.forEach(function(input) {
  input.addEventListener('input', search)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/list.js/1.3.0/list.min.js"></script>
<div id="myTable">
  <h1>My Table</h1>
  <div>
    <input data-search-type="id" class="search" placeholder="Search ID" />
    <input data-search-type="firstName" class="search" placeholder="Search First Name" />
    <input data-search-type="lastName" class="search" placeholder="Search Last Name" />
  </div>
  <table>
    <thead>
      <tr>
        <th id="cols" class="sortable" >ID</th>
        <th id="cols" class="sortable" >First</th>
        <th id="cols" class="sortable" >Last</th>
      </tr>
    </thead>
    <tbody class="list">
      <tr class="even">
        <td id="cols" class="id">1</td>
        <td id="cols" class="firstName">John</td> 
        <td id="cols" class="lastName">Doe</td> 
      </tr>
      <tr class="even">
        <td id="cols" class="id">2</td>
        <td id="cols" class="firstName">Jane</td> 
        <td id="cols" class="lastName">Doe</td> 
      </tr>
      <tr class="even">
        <td id="cols" class="id">3</td>
        <td id="cols" class="firstName">Foo</td> 
        <td id="cols" class="lastName">Bar</td> 
      </tr>
    </tbody>
  </table>
</div>

另一种选择是使用filter方法。

var searchInputs = document.querySelectorAll('input');
var options = {
  valueNames: ['id', 'firstName', 'lastName']
};
var userList = new List('myTable', options)

function search ( e ) {
  var curr = e.target;
  userList.filter(function(item) {
    if(item.values()[curr.dataset.searchType].indexOf(curr.value) > -1) {
      return true
    } else {
      return false;
    }
  })
}

searchInputs.forEach(function(input) {
  input.addEventListener('input', search)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/list.js/1.3.0/list.min.js"></script>
<div id="myTable">
  <h1>My Table</h1>
  <div>
    <input data-search-type="id" class="search" placeholder="Search ID" />
    <input data-search-type="firstName" class="search" placeholder="Search First Name" />
    <input data-search-type="lastName" class="search" placeholder="Search Last Name" />
  </div>
  <table>
    <thead>
      <tr>
        <th id="cols" class="sortable" >ID</th>
        <th id="cols" class="sortable" >First</th>
        <th id="cols" class="sortable" >Last</th>
      </tr>
    </thead>
    <tbody class="list">
      <tr class="even">
        <td id="cols" class="id">1</td>
        <td id="cols" class="firstName">John</td> 
        <td id="cols" class="lastName">Doe</td> 
      </tr>
      <tr class="even">
        <td id="cols" class="id">2</td>
        <td id="cols" class="firstName">Jane</td> 
        <td id="cols" class="lastName">Doe</td> 
      </tr>
      <tr class="even">
        <td id="cols" class="id">3</td>
        <td id="cols" class="firstName">Foo</td> 
        <td id="cols" class="lastName">Bar</td> 
      </tr>
    </tbody>
  </table>
</div>