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?

Answer 1

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