tablefilter/static/partials/books.html

A Javascript library making HTML tables filterable and a bit more

<table id="books">
    <thead>
        <tr>
            <th colspan="2">Book</th>
            <th>Price</th>
            <th colspan="2">Delivery Items</th>
            <th>&nbsp;</th>
        </tr>
        <tr>
            <th width="210">Title</th>
            <th width="150">Author</th>
            <th width="50">$</th>
            <th width="30">In store</th>
            <th width="70">Shipping</th>
            <th width="100">Publication Date</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Boris Godunov</td>
            <td>Alexandr Pushkin</td>
            <td>
                <div align="right">7.15</div>
            </td>
            <td data-tf-sortKey="1">
                <input type="checkbox" disabled="disabled" value="" checked="checked" />
            </td>
            <td data-tf-sortKey="1">1 Hour</td>
            <td>
                <div align="right">01/01/1999</div>
            </td>
        </tr>
        <tr>
            <td>The Rainmaker</td>
            <td>John Grisham</td>
            <td>
                <div align="right">7.99</div>
            </td>
            <td data-tf-sortKey="0">
                <input type="checkbox" disabled="disabled" value="" />
            </td>
            <td data-tf-sortKey="48">2 Days</td>
            <td>
                <div align="right">12/01/2001</div>
            </td>
        </tr>
        <tr>
            <td>The Green Mile</td>
            <td>Stephen King</td>
            <td>
                <div align="right">11.10</div>
            </td>
            <td data-tf-sortKey="1">
                <input type="checkbox" disabled="disabled" value="" checked="checked" />
            </td>
            <td data-tf-sortKey="24">24 Hours</td>
            <td>
                <div align="right">01/01/1992</div>
            </td>
        </tr>
        <tr>
            <td>Misery</td>
            <td>Stephen King</td>
            <td>
                <div align="right">7.70</div>
            </td>
            <td data-tf-sortKey="1">
                <input type="checkbox" disabled="disabled" value="" checked="checked" />
            </td>
            <td data-tf-sortKey="na">na</td>
            <td>
                <div align="right">01/01/2003</div>
            </td>
        </tr>
        <tr>
            <td>The Dark Half</td>
            <td>Stephen King</td>
            <td>
                <div align="right">0</div>
            </td>
            <td data-tf-sortKey="1">
                <input type="checkbox" disabled="disabled" value="" checked="checked" />
            </td>
            <td data-tf-sortKey="48">2 Days</td>
            <td>
                <div align="right">10/30/1999</div>
            </td>
        </tr>
        <tr>
            <td>The Partner</td>
            <td>John Grisham</td>
            <td>
                <div align="right">12.99</div>
            </td>
            <td data-tf-sortKey="0">
                <input type="checkbox" disabled="disabled" value="" />
            </td>
            <td data-tf-sortKey="24">24 Hours</td>
            <td>
                <div align="right">01/01/2005</div>
            </td>
        </tr>
        <tr>
            <td>It</td>
            <td>Stephen King</td>
            <td>
                <div align="right">9.70</div>
            </td>
            <td data-tf-sortKey="0">
                <input type="checkbox" disabled="disabled" value="" />
            </td>
            <td data-tf-sortKey="12">12 Hours</td>
            <td>
                <div align="right">10/15/2001</div>
            </td>
        </tr>
        <tr>
            <td>Cousin Bette</td>
            <td>Honore de Balzac</td>
            <td>
                <div align="right">0</div>
            </td>
            <td data-tf-sortKey="1">
                <input type="checkbox" disabled="disabled" value="" checked="checked" />
            </td>
            <td data-tf-sortKey="1">1 Hour</td>
            <td>
                <div align="right">12/01/1991</div>
            </td>
        </tr>
        <tr>
            <td>The Testament</td>
            <td>John Grisham</td>
            <td>
                <div align="right">19.10</div>
            </td>
            <td data-tf-sortKey="1">
                <input type="checkbox" disabled="disabled" value="" checked="checked" />
            </td>
            <td data-tf-sortKey="48">2 Days</td>
            <td>
                <div align="right">12/17/1999</div>
            </td>
        </tr>
        <tr>
            <td>Eugene Onegin</td>
            <td>Alexandr Pushkin</td>
            <td>
                <div align="right">11.20</div>
            </td>
            <td data-tf-sortKey="0">
                <input type="checkbox" disabled="disabled" value="" />
            </td>
            <td data-tf-sortKey="24">24 Hours</td>
            <td>
                <div align="right">09/27/2005</div>
            </td>
        </tr>
        <tr>
            <td>Dark Avenues</td>
            <td>Ivan Bunin</td>
            <td>
                <div align="right">14.96</div>
            </td>
            <td data-tf-sortKey="1">
                <input type="checkbox" disabled="disabled" value="" checked="checked" />
            </td>
            <td data-tf-sortKey="1">1 Hour</td>
            <td>
                <div align="right">10/01/2008</div>
            </td>
        </tr>
        <tr>
            <td>Father Goriot</td>
            <td>Honore de Balzac</td>
            <td>
                <div align="right">9.99</div>
            </td>
            <td data-tf-sortKey="0">
                <input type="checkbox" disabled="disabled" value="" />
            </td>
            <td data-tf-sortKey="48">2 Days</td>
            <td>
                <div align="right">06/06/2010</div>
            </td>
        </tr>
        <tr>
            <td>The Captain's Daughter</td>
            <td>Alexandr Pushkin</td>
            <td>
                <div align="right">10.21</div>
            </td>
            <td data-tf-sortKey="0">
                <input type="checkbox" disabled="disabled" value="" />
            </td>
            <td data-tf-sortKey="48">2 Days</td>
            <td>
                <div align="right">03/01/2001</div>
            </td>
        </tr>
        <tr>
            <td>Hamlet</td>
            <td>William Shakespeare</td>
            <td>
                <div align="right">5.99</div>
            </td>
            <td data-tf-sortKey="0">
                <input type="checkbox" disabled="disabled" value="" />
            </td>
            <td data-tf-sortKey="1">1 Hour</td>
            <td>
                <div align="right">04/15/2003</div>
            </td>
        </tr>
        <tr>
            <td>The Village</td>
            <td>Ivan Bunin</td>
            <td>
                <div align="right">11.66</div>
            </td>
            <td data-tf-sortKey="1">
                <input type="checkbox" disabled="disabled" value="" checked="checked" />
            </td>
            <td data-tf-sortKey="24">24 Hours</td>
            <td>
                <div align="right">01/02/2010</div>
            </td>
        </tr>
        <tr>
            <td>The Winter's Tale</td>
            <td>William Shakespeare</td>
            <td>
                <div align="right">19.31</div>
            </td>
            <td data-tf-sortKey="1">
                <input type="checkbox" disabled="disabled" value="" checked="checked" />
            </td>
            <td data-tf-sortKey="1">1 Hour</td>
            <td>
                <div align="right">02/12/2010</div>
            </td>
        </tr>
        <tr>
            <td>The Black Sheep</td>
            <td>Honore de Balzac</td>
            <td>
                <div align="right">16.00</div>
            </td>
            <td data-tf-sortKey="0">
                <input type="checkbox" disabled="disabled" value="" />
            </td>
            <td data-tf-sortKey="1">1 Hour</td>
            <td>
                <div align="right">08/28/1976</div>
            </td>
        </tr>
        <tr>
            <td>Lost Illusions</td>
            <td>Honore de Balzac</td>
            <td>
                <div align="right">8.0</div>
            </td>
            <td data-tf-sortKey="1">
                <input type="checkbox" disabled="disabled" value="" checked="checked" />
            </td>
            <td data-tf-sortKey="na">na</td>
            <td>
                <div align="right">07/10/2010</div>
            </td>
        </tr>
    </tbody>
</table>