这是我当前的 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 兼容吗?意思是...其他页面上的结果会被搜索到吗?
最佳答案
就您而言,您需要做的就是从使用 ids 更改为使用类。
<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());
});
关于Javascript 对 keyup 进行过滤,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30017538/