random .NET and web development musings

Here is a simple jQuery plugin to allow users to filter table rows through dropdowns in the header rows.

Demo:

A B C
A B C
A B C
AA BB CC
AA BB CCC
A BB CCC
AAA BB C
AAA BB CCC

HTML:

<table id="DemoTable">
    <thead>
        <tr>
            <th>A</th>
            <th>B</th>
            <th>C</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>A</td>
            <td>B</td>
            <td>C</td>
        </tr>
        <tr>
            <td>A</td>
            <td>B</td>
            <td>C</td>
        </tr>
        <tr>
            <td>AA</td>
            <td>BB</td>
            <td>CC</td>
        </tr>
        <tr>
            <td>AA</td>
            <td>BB</td>
            <td>CCC</td>
        </tr>
        <tr>
            <td>A</td>
            <td>BB</td>
            <td>CCC</td>
        </tr>
        <tr>
<td>AAA</td>
<td>BB</td>
<td>C</td>
        </tr>
        <tr>
<td>AAA</td>
<td>BB</td>
<td>CCC</td>
        </tr>
    </tbody>
</table>

JavaScript:

$(function(){
    $('#DemoTable').tablefilterer({ cols: [0, 1, 2] });
});

Download the jQuery Table Filterer here.



NO COMMENTS
Post a comment