我有一个工作演示，但仅适用于列表视图，我需要能够单击顶部的 A、B、C 等列表，然后按表中的联系人姓名进行过滤。
因此，一旦您单击 A，它将显示表中以“A”开头的所有名称。
正如我所提到的，它适用于列表视图，但不确定如何让它在表格中工作？
希望有人可以提供帮助。它基于来自http://www.ihwy.com/Labs/jquery-listnav-plugin.aspx的插件不确定在哪里或如何手动执行此操作，因为对于 jQuery 来说是相当新的。
$('ul.list-nav').listnav({
includeAll: false,
noMatchText: 'Sorry, nothing matched this filter, please try another letter.',
includeAll: true,
initLetter: 'n',
showCounts: false
});
谢谢
我相信那里有许多“表格排序器”插件，但这个简短的代码可以实现您正在寻找的东西
脚本
var alphas = 'abcdefghijklmnopqrstuvwxyz';
$(document).ready(function () {
var tmp = '';
for (var x = 0; x < 26; x++) tmp += '<a href="#">' + alphas[x].toUpperCase() + '</a> ';
$('#table_filter').append(tmp);
$('#table_filter a').click(function () {
if ($(this).attr('id') == 'show_all') {
$('#searchNames tbody tr').css('display', 'table-row');
$('#message').html('displaying all rows');
return false;
}
var alpha = $(this).html();
$('#searchNames tbody tr').hide().filter(function () {
var td = $('td:first', $(this));
return td.length && td.html() && new RegExp('^' + alpha + '.*$', 'i').test(td.html().toLowerCase());
}).css('display', 'table-row');
$('#message').html('displaying rows with "' + alpha + '"');
return false;
})
});
和标记
<div id="table_filter">
<a id="show_all" href="#">Show All</a>
</div>
<p id="message"></p>
<table class="table1" id="searchNames" style="width:500px;">
<thead>
<tr>
<th>CONTACT NAME</th>
<th>col 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>ssfjkn jkdsnf</td>
<td>Col2</td>
</tr>
<tr>
<td>asdl kln</td>
<td>Col2</td>
</tr>
<tr>
<td>apodf</td>
<td>Col2</td>
</tr>
<tr>
<td>opkpokj</td>
<td>Col2</td>
</tr>
<tr>
<td>lkohasd</td>
<td>Col2</td>
</tr>
<tr>
<td>nlkcn</td>
<td>Col2</td>
</tr>
<tr>
<td>qwdsdfsd</td>
<td>Col2</td>
</tr>
<tr>
<td>essfjkn jkdsnf</td>
<td>Col2</td>
</tr>
<tr>
<td>easdl kln</td>
<td>Col2</td>
</tr>
<tr>
<td>qapodf</td>
<td>Col2</td>
</tr>
<tr>
<td>oopkpokj</td>
<td>Col2</td>
</tr>
<tr>
<td>dlkohasd</td>
<td>Col2</td>
</tr>
<tr>
<td>snlkcn</td>
<td>Col2</td>
</tr>
<tr>
<td>vqwdsdfsd</td>
<td>Col2</td>
</tr>
<tr>
<td>ssfjkn jkdsnf</td>
<td>Col2</td>
</tr>
<tr>
<td>asdl kln</td>
<td>Col2</td>
</tr>
<tr>
<td>apodf</td>
<td>Col2</td>
</tr>
<tr>
<td>opkpokj</td>
<td>Col2</td>
</tr>
<tr>
<td>lkohasd</td>
<td>Col2</td>
</tr>
<tr>
<td>nlkcn</td>
<td>Col2</td>
</tr>
<tr>
<td>qwdsdfsd</td>
<td>Col2</td>
</tr>
<tr>
<td>essfjkn jkdsnf</td>
<td>Col2</td>
</tr>
<tr>
<td>easdl kln</td>
<td>Col2</td>
</tr>
<tr>
<td>qapodf</td>
<td>Col2</td>
</tr>
<tr>
<td>oopkpokj</td>
<td>Col2</td>
</tr>
<tr>
<td>dlkohasd</td>
<td>Col2</td>
</tr>
<tr>
<td>snlkcn</td>
<td>Col2</td>
</tr>
<tr>
<td>vqwdsdfsd</td>
<td>Col2</td>
</tr>
<tr>
<td>ssfjkn jkdsnf</td>
<td>Col2</td>
</tr>
<tr>
<td>asdl kln</td>
<td>Col2</td>
</tr>
<tr>
<td>apodf</td>
<td>Col2</td>
</tr>
<tr>
<td>opkpokj</td>
<td>Col2</td>
</tr>
<tr>
<td>lkohasd</td>
<td>Col2</td>
</tr>
<tr>
<td>nlkcn</td>
<td>Col2</td>
</tr>
<tr>
<td>qwdsdfsd</td>
<td>Col2</td>
</tr>
<tr>
<td>essfjkn jkdsnf</td>
<td>Col2</td>
</tr>
<tr>
<td>easdl kln</td>
<td>Col2</td>
</tr>
<tr>
<td>qapodf</td>
<td>Col2</td>
</tr>
<tr>
<td>oopkpokj</td>
<td>Col2</td>
</tr>
<tr>
<td>dlkohasd</td>
<td>Col2</td>
</tr>
<tr>
<td>snlkcn</td>
<td>Col2</td>
</tr>
<tr>
<td>vqwdsdfsd</td>
<td>Col2</td>
</tr>
<tr>
<td>ssfjkn jkdsnf</td>
<td>Col2</td>
</tr>
<tr>
<td>asdl kln</td>
<td>Col2</td>
</tr>
<tr>
<td>apodf</td>
<td>Col2</td>
</tr>
<tr>
<td>opkpokj</td>
<td>Col2</td>
</tr>
<tr>
<td>lkohasd</td>
<td>Col2</td>
</tr>
<tr>
<td>nlkcn</td>
<td>Col2</td>
</tr>
<tr>
<td>qwdsdfsd</td>
<td>Col2</td>
</tr>
<tr>
<td>essfjkn jkdsnf</td>
<td>Col2</td>
</tr>
<tr>
<td>easdl kln</td>
<td>Col2</td>
</tr>
<tr>
<td>qapodf</td>
<td>Col2</td>
</tr>
<tr>
<td>oopkpokj</td>
<td>Col2</td>
</tr>
<tr>
<td>dlkohasd</td>
<td>Col2</td>
</tr>
<tr>
<td>snlkcn</td>
<td>Col2</td>
</tr>
<tr>
<td>vqwdsdfsd</td>
<td>Col2</td>
</tr>
</tbody>
</table>
和 jsfiddle
更新
使其基于 4 过滤<td>，替换
var td = $('td:first', $(this));
和
var td = $('td:nth-child(4)', $(this));
上面的帖子不适用于从数据库中获取的动态值。我试着写一些不那么复杂的东西，效果也很好。
$( document ).ready(function() {
var alphas = 'abcdefghijklmnopqrstuvwxyz';
var tmp = '';
for (var x = 0; x < 26; x++) tmp += '<a href="#">' + alphas[x].toUpperCase() + '</a> ';
$('#table_filter').append(tmp);
$('#table_filter a').click(function () {
var alpha = $(this).html();
if(alpha == 'Show All'){
$('#searchNames tbody tr').css('display', 'table-row');
}
else {
$('#searchNames tbody tr').each(function( index ) {
var cur = $(':nth-child(1)', this).text().trim();
if(cur.charAt(0) === alpha) {
$(this).css('display', 'table-row');
}
else {
$(this).hide();
}
});
}
});
});