jQuery + tablesorter + IE7 + large tables = hell

Question

I use jQuery and the tablesorter plugin extensively, but with tables of significant size (900-1200 rows), the plugin just grinds Internet Explorer (tried 7 and 8) to a halt.

Yes, I'd like to paginate (can't); yes, I'd like to tell everyone to use Chrome (can't), but I'm wondering if anyone has any other solutions. Perhaps a quicker table sorting plugin, or something I can try. I really don't want to do a server-side sort.

Thanks!

Answer 1

How about client-side pagination? It's likely the speed hit comes from the DOM manipulation, not the sorting algorithm. So store the data in a javascript array, display only the first 20 items, and sort on the array and not on the elements.

Answer 2

I've had exactly the same problem with exactly the same tools. The best you can do is try to make your HTML as clean as possible. And, always remember to add a tfoot element BEFORE the tbody element. This will help IE render the table faster:

<table>
    <thead>
        <tr>
            <th>headers here</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td>footers here</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>body here</td>
        </tr>
    </tbody>
</table>

Even if you don't need a footer, do it this way. The only other advice I have would be to try some CSS tricks to either style or hide the table until the javascript is done loading. Maybe start with an animated loading gif, and remove it when the javascript is done.