对 keyup 进行 Javascript 过滤

Question

这是我当前的 HTML 表格:

<table class="table table-index">
    <thead>
        <tr class="filters">
            <th><input type="text" id="search_table" class="form-control company-id" placeholder="ID"></th>
            <th><input type="text" id="search_table" class="form-control" placeholder="Organization"></th>
            <th><input type="text" id="search_table" class="form-control" placeholder="Contact"></th>
            <th><input type="text" id="search_table" class="form-control" placeholder="Title"></th>
            <th><input type="text" id="search_table" class="form-control" placeholder="City"></th>
            <th><input type="text" id="search_table" class="form-control" placeholder="State"></th>
            <th><input type="text" id="search_table" class="form-control" placeholder="email"></th>
            <th><input type="text" id="search_table" class="form-control" placeholder="contacted"></th>
            <th><input type="text" id="search_table" class="form-control" placeholder="hiring"></th>
            <th><input type="text" id="search_table" class="form-control" placeholder="hire_count"></th>
            <th>
                <div class="checkbox-inline">
                    <input type="checkbox" id="checkbox1" class="large" data-label-prepend="prefix">
                        <label for="checkbox1">Contacted</label>
                </div>
             </th>
        </tr>
    </thead>


    <tbody>
        <% @companies.each do |company| %>
        <tr>
            <td class="id"><%= company.id %></td>
            <td class="Organization"><%= link_to company.organization,
                    admin_company_path(company.id) %></td>
            <td class="contact"><%= company.name %></td>
            <td class="contact-title"><%= company.title %></td>
            <td class="city"><%= company.city %></td>
            <td class="state"><%= company.state %></td>
            <td class="email"><%= company.email %></td>
            <td class="contacted"><%= company.status %></td>
            <td class="hiring"><%= company.hiring %></td>
            <td class="hire_count"><%= company.hire_count %></td>
        </tr>
        <% end %>
    </tbody>
</table>

这是我的 table_filtering.js 文件:

$(document).ready(function() {
    if ($(".table-index").length > 0 ) {
        $('#search_table').keyup(function() {
            searchByColumn($(this).val());
        });

        function searchByColumn(searchVal) {
            var table = $('.table-index')
            table.find('tr').each(function(index, row){
                var allDataPerRow = $(row).find('td');
                if (allDataPerRow.length > 0) {
                    var found = false;
                    allDataPerRow.each(function(index, td) {
                        var regExp = new RegExp(searchVal, "i");

                        if(regExp.test($(td).text())) {
                            found = true
                            return false;
                        }
                  });

                  if(found === true) {
                      $(row).show();
                  }else {
                      $(row).hide();
                  }
                }
            });
        }
    }
});

问题是我只按第一个 $("#search_table") 进行过滤，这是 ID 列，但我没有按任何文本框进行过滤。我该怎么做才能过滤所有文本框？我还希望用户能够按多个文本框进行过滤。因此，如果用户输入城市和标题，将仅显示城市和标题的结果。

此外，我当前的过滤是否与 will_paginate 兼容？意思是...是否会搜索其他页面上的结果？

Answer 1

在您的情况下，您需要做的就是从使用 id 改为使用类。

<tr class="filters">
    <th>
        <input type="text" class="search_table form-control company-id" placeholder="ID" />
    </th>
    <!-- etc -->            

相关的 JS 部分将使用 .search_table 选择器:

$('.search_table').keyup(function() {
    searchByColumn($(this).val());
});

http://plnkr.co/edit/CXuhR4ucd4bFKbrifVMp?p=preview