Using JQuery TableSorter plugin on a repeater in ASP.NET doesn't work

Question

I'm trying to use the tablesorter plugin from this page. It's a very simple plugin that do the sorting on the client-side.

Here is my repeater:

<asp:Repeater ID="RepeaterChangeLog" runat="server" >
        <HeaderTemplate>
            <table id="ChangeLogTable" class="table tablesorter table-bordered"> 
            <thead>
                <tr>
                <th>Date de correction</th>
                <th>Correcteur</th>
                <th>BugID</th>
                <th>Catégorie</th>
                <th>Module</th>
                <th>Description de la correction</th>
                <th>Impact</th>
                <th>Rapporté par</th>
                <th>Demandé par</th>
                </tr>
            </thead>
        </HeaderTemplate>
        <ItemTemplate>
            <tbody>
                <tr>
                    <td width="125px"> <%# DataBinder.Eval(Container.DataItem, "ChangeLogDate")%></a></td>
                    <td width="100px"> <%# DataBinder.Eval(Container.DataItem, "FixedBy")%> </td>
                    <td width="75px"> <%# DataBinder.Eval(Container.DataItem, "BugID")%> </td>
                    <td width="100px"> <%# DataBinder.Eval(Container.DataItem, "Category")%> </td>
                    <td width="100px"> <%# DataBinder.Eval(Container.DataItem, "Module")%> <%# DataBinder.Eval(Container.DataItem, "AdditionalModule")%></td>
                    <td width="300px"> <%# DataBinder.Eval(Container.DataItem, "Description")%> </td>
                    <td width="300px"> <%# DataBinder.Eval(Container.DataItem, "Impact")%> </td>
                    <td width="100px"> <%# DataBinder.Eval(Container.DataItem, "ReportedBy")%> </td>
                    <td width="100px"> <%# DataBinder.Eval(Container.DataItem, "AskedBy")%> </td>
                </tr>
            </tbody>
        </ItemTemplate>

        <FooterTemplate>
            </table>
        </FooterTemplate>
    </asp:Repeater>

Here is how I call the tablesorter

$(document).ready(function () {
            $("#ChangeLogTable").tablesorter();
    });

The result is strange. I can see the CSS applied, the up and down arrow are changing when I click on the header but the sort itself doesn't work. I tried a very simple table found here in the same page and that table was working perfectly. The only difference I can see between the 2 are that one is generated with a repeater and the other is only plain HTML. In my opinion, it should not make a difference since the result is the same html but maybe Microsoft put some secret and hidden code in the header that make the plugin fail.

I hope someone could help me get around this problem! Thanks!

Answer 1

I found the problem and I can't believe I didn't see it the first time but eh... it was friday!

The plugin is working with the "new" thead and tbody, which I'm not very use to. When I created my repeater, I just put the thead in the HeaderTemplate and the tbody in the ItemTemplate. But what I forgotted is that the ItemTemplate keeps repeating at each row, so my table had multiple tbody. This is not ok and the plugin will not work with this. In other words, that was terrible HTML.

So here is the good repeater, with the tbody placed at the right place:

<asp:Repeater ID="RepeaterChangeLog" runat="server" >
        <HeaderTemplate>
            <table id="ChangeLogTable" class="table tablesorter table-bordered"> 
            <thead>
                <tr>
                <th>Date de correction</th>
                <th>Correcteur</th>
                <th>BugID</th>
                <th>Catégorie</th>
                <th>Module</th>
                <th>Description de la correction</th>
                <th>Impact</th>
                <th>Rapporté par</th>
                <th>Demandé par</th>
                </tr>
            </thead>
            <tbody>
        </HeaderTemplate>
        <ItemTemplate>
                <tr>
                    <td width="125px"> <%# DataBinder.Eval(Container.DataItem, "ChangeLogDate")%></a></td>
                    <td width="100px"> <%# DataBinder.Eval(Container.DataItem, "FixedBy")%></td>
                    <td width="75px"><a href="http://adobs.aquadata.com/edit_bug.aspx?id=<%# DataBinder.Eval(Container.DataItem, "BugID")%>"><%# DataBinder.Eval(Container.DataItem, "BugID")%></a></td>
                    <td width="100px"> <%# DataBinder.Eval(Container.DataItem, "Category")%></td>
                    <td width="100px"> <%# DataBinder.Eval(Container.DataItem, "Module")%> <%# DataBinder.Eval(Container.DataItem, "AdditionalModule")%></td>
                    <td width="300px"> <%# DataBinder.Eval(Container.DataItem, "Description")%></td>
                    <td width="300px"> <%# DataBinder.Eval(Container.DataItem, "Impact")%></td>
                    <td width="100px"> <%# DataBinder.Eval(Container.DataItem, "ReportedBy")%></td>
                    <td width="100px"> <%# DataBinder.Eval(Container.DataItem, "AskedBy")%></td>
                </tr>                
        </ItemTemplate>
        <FooterTemplate>
            </tbody>
            </table>
        </FooterTemplate>
    </asp:Repeater>