html - jQuery Alpabetical Filter by name within a table, A,B,C etc list -
i have working demo listview, need able click on a,b,c etc list @ top filter contact name within table.
so click on a, display names within table start 'a'.
as mentioned works list view, not sure how working within table?
hope can help. based on plugin http://www.ihwy.com/labs/jquery-listnav-plugin.aspx not sure or how manually new jquery.
$('ul.list-nav').listnav({ includeall: false, nomatchtext: 'sorry, nothing matched filter, please try letter.', includeall: true, initletter: 'n', showcounts: false }); thanks
i believe there numerous "table sorter" plugins out there short , simple code achieve you're looking
script
var alphas = 'abcdefghijklmnopqrstuvwxyz'; $(document).ready(function () { var tmp = ''; (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 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 "' + alpha + '"'); return false; }) }); and markup
<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> and jsfiddle
update
to make filter based on 4th <td>, replace
var td = $('td:first', $(this)); with
var td = $('td:nth-child(4)', $(this));
Comments
Post a Comment