John John - 2 months ago 7
CSS Question

jQuery Alpabetical Filter by name within a table, A,B,C etc list

I have a working demo but only for a listview, I need to be able to click on the A,B,C etc list at the top then filter by the contact name within the table.

So as soon as you click on A, it will display all the names within the table that start with 'A'.

As i mentioned it works for a list view, but not sure how to get it working for within a table?

http://jsfiddle.net/37UxT/1/

Hope someone can help. Its based on a plugin from http://www.ihwy.com/Labs/jquery-listnav-plugin.aspx Not sure where or how to do this manually as fairly new to jQuery.

$('ul.list-nav').listnav({
includeAll: false,
noMatchText: 'Sorry, nothing matched this filter, please try another letter.',
includeAll: true,
initLetter: 'n',
showCounts: false
});


Thanks

Answer

I believe there are numerous "table sorter" plugins out there but this short and simple code could achieve what you're looking for

Script

     var alphas = 'abcdefghijklmnopqrstuvwxyz';
     $(document).ready(function () {
        var tmp = '';
        for (var x = 0; x < 26; x++) tmp += '<a href="#">' + alphas[x].toUpperCase() + '</a>&nbsp;&nbsp;';
        $('#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;
        })
     });

AND The 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 the jsfiddle

http://jsfiddle.net/Khq9k/2/

UPDATE

to make it filter based on 4th <td>, replace

var td = $('td:first', $(this));

with

var td = $('td:nth-child(4)', $(this));