Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>I believe there are numerous "table sorter" plugins out there but this short and simple code could achieve what you're looking for </p> <p><strong>Script</strong> </p> <pre><code> var alphas = 'abcdefghijklmnopqrstuvwxyz'; $(document).ready(function () { var tmp = ''; for (var x = 0; x &lt; 26; x++) tmp += '&lt;a href="#"&gt;' + alphas[x].toUpperCase() + '&lt;/a&gt;&amp;nbsp;&amp;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 &amp;&amp; td.html() &amp;&amp; new RegExp('^' + alpha + '.*$', 'i').test(td.html().toLowerCase()); }).css('display', 'table-row'); $('#message').html('displaying rows with "' + alpha + '"'); return false; }) }); </code></pre> <p><strong>AND The Markup</strong> </p> <pre><code> &lt;div id="table_filter"&gt; &lt;a id="show_all" href="#"&gt;Show All&lt;/a&gt; &lt;/div&gt; &lt;p id="message"&gt;&lt;/p&gt; &lt;table class="table1" id="searchNames" style="width:500px;"&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;CONTACT NAME&lt;/th&gt; &lt;th&gt;col 2&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td&gt;ssfjkn jkdsnf&lt;/td&gt; &lt;td&gt;Col2&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;asdl kln&lt;/td&gt; &lt;td&gt;Col2&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;apodf&lt;/td&gt; &lt;td&gt;Col2&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;opkpokj&lt;/td&gt; &lt;td&gt;Col2&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;lkohasd&lt;/td&gt; &lt;td&gt;Col2&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;nlkcn&lt;/td&gt; &lt;td&gt;Col2&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;qwdsdfsd&lt;/td&gt; &lt;td&gt;Col2&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;essfjkn jkdsnf&lt;/td&gt; &lt;td&gt;Col2&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;easdl kln&lt;/td&gt; &lt;td&gt;Col2&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;qapodf&lt;/td&gt; &lt;td&gt;Col2&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;oopkpokj&lt;/td&gt; &lt;td&gt;Col2&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;dlkohasd&lt;/td&gt; &lt;td&gt;Col2&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;snlkcn&lt;/td&gt; &lt;td&gt;Col2&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;vqwdsdfsd&lt;/td&gt; &lt;td&gt;Col2&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;ssfjkn jkdsnf&lt;/td&gt; &lt;td&gt;Col2&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;asdl kln&lt;/td&gt; &lt;td&gt;Col2&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;apodf&lt;/td&gt; &lt;td&gt;Col2&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;opkpokj&lt;/td&gt; &lt;td&gt;Col2&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;lkohasd&lt;/td&gt; &lt;td&gt;Col2&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;nlkcn&lt;/td&gt; &lt;td&gt;Col2&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;qwdsdfsd&lt;/td&gt; &lt;td&gt;Col2&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;essfjkn jkdsnf&lt;/td&gt; &lt;td&gt;Col2&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;easdl kln&lt;/td&gt; &lt;td&gt;Col2&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;qapodf&lt;/td&gt; &lt;td&gt;Col2&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;oopkpokj&lt;/td&gt; &lt;td&gt;Col2&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;dlkohasd&lt;/td&gt; &lt;td&gt;Col2&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;snlkcn&lt;/td&gt; &lt;td&gt;Col2&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;vqwdsdfsd&lt;/td&gt; &lt;td&gt;Col2&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;ssfjkn jkdsnf&lt;/td&gt; &lt;td&gt;Col2&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;asdl kln&lt;/td&gt; &lt;td&gt;Col2&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;apodf&lt;/td&gt; &lt;td&gt;Col2&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;opkpokj&lt;/td&gt; &lt;td&gt;Col2&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;lkohasd&lt;/td&gt; &lt;td&gt;Col2&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;nlkcn&lt;/td&gt; &lt;td&gt;Col2&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;qwdsdfsd&lt;/td&gt; &lt;td&gt;Col2&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;essfjkn jkdsnf&lt;/td&gt; &lt;td&gt;Col2&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;easdl kln&lt;/td&gt; &lt;td&gt;Col2&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;qapodf&lt;/td&gt; &lt;td&gt;Col2&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;oopkpokj&lt;/td&gt; &lt;td&gt;Col2&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;dlkohasd&lt;/td&gt; &lt;td&gt;Col2&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;snlkcn&lt;/td&gt; &lt;td&gt;Col2&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;vqwdsdfsd&lt;/td&gt; &lt;td&gt;Col2&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;ssfjkn jkdsnf&lt;/td&gt; &lt;td&gt;Col2&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;asdl kln&lt;/td&gt; &lt;td&gt;Col2&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;apodf&lt;/td&gt; &lt;td&gt;Col2&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;opkpokj&lt;/td&gt; &lt;td&gt;Col2&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;lkohasd&lt;/td&gt; &lt;td&gt;Col2&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;nlkcn&lt;/td&gt; &lt;td&gt;Col2&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;qwdsdfsd&lt;/td&gt; &lt;td&gt;Col2&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;essfjkn jkdsnf&lt;/td&gt; &lt;td&gt;Col2&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;easdl kln&lt;/td&gt; &lt;td&gt;Col2&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;qapodf&lt;/td&gt; &lt;td&gt;Col2&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;oopkpokj&lt;/td&gt; &lt;td&gt;Col2&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;dlkohasd&lt;/td&gt; &lt;td&gt;Col2&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;snlkcn&lt;/td&gt; &lt;td&gt;Col2&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;vqwdsdfsd&lt;/td&gt; &lt;td&gt;Col2&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; </code></pre> <p><strong>And the jsfiddle</strong> </p> <p><a href="http://jsfiddle.net/Khq9k/2/" rel="nofollow">http://jsfiddle.net/Khq9k/2/</a></p> <p><strong>UPDATE</strong></p> <p>to make it filter based on 4th <code>&lt;td&gt;</code>, replace </p> <pre><code>var td = $('td:first', $(this)); </code></pre> <p>with</p> <pre><code>var td = $('td:nth-child(4)', $(this)); </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload