在ASP.NET中的转发器上使用JQuery TableSorter插件不起作用

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.

我正在尝试使用此页面中的tablesorter插件。这是一个非常简单的插件,可以在客户端进行排序。

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

这是我如何称呼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.

结果很奇怪。我可以看到应用的CSS,当我点击标题时,向上和向下箭头正在改变,但排序本身不起作用。我在同一页面尝试了一个非常简单的表格,该表格工作正常。我可以在2之间看到的唯一区别是,一个是使用转发器生成的,另一个是纯HTML。在我看来,它应该没有什么区别,因为结果是相同的HTML但可能微软在标题中放置了一些秘密和隐藏的代码,使插件失败。

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

我希望有人可以帮我解决这个问题!谢谢!

2 个解决方案

#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.

该插件正在使用“新”thead和tbody,我不太习惯。当我创建我的转发器时,我只是将thead放在HeaderTemplate中,将tbody放在ItemTemplate中。但我忘记的是ItemTemplate在每一行都不断重复,所以我的桌子有多个tbody。这不行,插件不适用于此。换句话说,这是可怕的HTML。

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

所以这里是好的中继器,tbody放在正确的位置:

<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>

#2

One problem I had was that I was referencing the repeater Id and not the Id of the table inside it.

我遇到的一个问题是我引用了转发器Id而不是其中的表的Id。

#1