jQuery Tablesorter: Issue with two THEADs

Question

I have TWO theads in my table

One (with one row) is for the headers, which tablesorter makes clickable for sorting.

The second, (with one row) is added by another jQuery script for adding filtering input boxes.

The structure ends up looking like

<table>
    <thead>
        <tr>
            <th>text</th>
            <th>text</th>
            <th>text</th>
            <th>text</th>
        </tr>
    </thead>
    <thead>
        <tr>
            <th><input /></th>
            <th><input /></th>
            <th><input /></th>
            <th><input /></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>data</td>
            <td>data</td>
            <td>data</td>
        </tr>
        ...
    </tbody>

Unfortunately, after table sorter is done, it puts all the tbody rows in the second thead, and leaves the tbody empty.

How can I fix this?

Did you get the inputs to work without sorting the grid? If so how? — Mark Redman
@MarkRedman It was all fixed by only having one THEAD in the table. — CaffGeek

bpeterson76 bpeterson76 · Accepted Answer · 2011-06-27T17:31:30

Two heads in a table is not valid HTML. Hence, it no workie....

Try putting the fields above or below the table, then use the tablesorter API do the magic. Here's how Datatables (a more powerful competitor to Tablesorter) handles this challenge:

example

jQuery Tablesorter: Issue with two THEADs

1 Answers