在 ASP.NET 的中继器上使用 JQuery TableSorter 插件不起作用答案

【问题标题】：Using JQuery TableSorter plugin on a repeater in ASP.NET doesn't work在 ASP.NET 的中继器上使用 JQuery TableSorter 插件不起作用
【发布时间】：2012-10-12 19:11:51
【问题描述】：

我正在尝试使用来自 page 的 tablesorter 插件。这是一个非常简单的插件，可以在客户端进行排序。

这是我的中继器：

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

这就是我如何称呼tablesorter

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

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

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

【问题讨论】：

你能显示这个Repeater的html输出吗？
是的，只要我上岗就可以了。

标签： c# jquery .net tablesorter

【解决方案1】：

我发现了问题，我不敢相信我不是第一次看到它，但是呃……那是星期五！

该插件正在使用“新的”thead 和 tbody，我不太习惯。创建转发器时，我只是将thead 放在HeaderTemplate 中，将tbody 放在ItemTemplate 中。但我忘记的是 ItemTemplate 在每一行都不断重复，所以我的表有多个 tbody。这是不行的，插件不能用这个。换句话说，那是糟糕的 HTML。

所以这是一个很好的中继器，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】：

我遇到的一个问题是我引用的是中继器 ID，而不是其中的表的 ID。

【讨论】：