jQuery表格排序器问题

Question

我了解到，通过尝试使用 jquery 中的 tablesorter 插件，表需要使用 和

标签。我正在使用 html 表，并且我使用 runat="server" 属性，因为我需要将数据绑定到服务器端的表。但是通过使用 runat= server 属性，代码以不同的方式呈现......而不是看起来像这样的视图源，这就是我的标记视图中的内容：

<table id="Table">
    <thead>
        <tr> <th>1st</th> <th>2nd</th> <th>3rd</th> </tr>
    </thead>
    <tbody>
        <tr><td>1st value</td><td>2nd value</td><td>3rd value</td></tr>
        <tr><td>1st value</td><td>2nd value</td><td>3rd value< /td></tr>
        <tr><td>1st value</td><td>2nd value</td><td>3rd value</td></tr>
        <tr><td>1st value</td><td>2nd value</td><td>3rd value</td></tr>
    </tbody>
</table>

看起来像这样，但没有 和

标签。这会使表格排序器无法工作？有人可以帮我解决这个问题吗？ “.NET 3.5 sp1 是我正在使用的版本”

【问题讨论】：

Answer 1

你应该看看这里 -Code Project Sortable Gridview using JQuery Tablesorter

本质上，您需要使用Gridview的UseAccessibleHeader property，以便在HTML输出中输出一个thead标签。

protected void Page_Load(object sender, EventArgs e)
{ 
if (this.gridView.Rows.Count > 0)
{
gridView.UseAccessibleHeader = true;
gridView.HeaderRow.TableSection = TableRowSection.TableHeader;
gridView.FooterRow.TableSection = TableRowSection.TableFooter;
}
}

如果使用带有 runat="server" 属性的 html 表而不是 asp.net 服务器控件，看起来好像没有简单的方法来防止 thead 标记不在 html 输出中呈现。您可以使用一些 JQuery 在文档就绪时将其插入到 DOM 中-

    //in script tags after JQuery and JQuery tablesorter src declarations
    $(function() 
    {
        $('#test').prepend(
        $('<thead></thead>').append($('#test tr:first').remove()) 
        );

        $("#test").tablesorter();
            //your table options
    });


//your html and asp markup
<table id="test" runat="server">
<thead><tr><th>1</th><th>2</th><th>3</th></tr></thead>
<tbody>  
<tr><td>my data 1.1</td><td>this data 1.2</td><td>that data 1.3</td></tr>
<tr><td>this data 2.1</td><td>that data 2.2</td><td>my data 2.3</td></tr>
<tr><td>that data 3.1</td><td>my data 3.2</td><td>this data 3.3</td></tr>
</tbody>
</table> 

输出这个，与tablesorter一起正常工作-

<table id="test">
<thead>
<tr>
<th class="header">1</th>
<th class="header">2</th>
<th class="header headerSortDown">3</th>
</tr>
</thead>
<tbody>
<tr>
<td>this data 1.1</td>
<td>that data 1.2</td>
<td>my data 1.3</td>
</tr>
<tr>
<td>my data 2.1</td>
<td>this data 2.2</td>
<td>that data 2.3</td>
</tr>
<tr>
<td>that data 3.1</td>
<td>my data 3.2</td>
<td>this data 3.3</td>
</tr>
</tbody>
</table>

Answer 2

从这个开始……

print("<table class='turnMeIntoTableSort'><tr><td>heading1</td><td>heading2</td></tr><tr><td>content1</td><td>content2</td></tr><tr><td>content3</td><td>content4</td></tr></table>");

然后这样做：

print("$(document).ready(){
         $('table.turnMeIntoTableSort > tr:first').wrap('<thead></thead>');
         $('table.turnMeIntoTableSort > tr:gt(1)').wrapAll('<tbody></tbody>');

         //now draw the tablesorter
         $('table.turnMeIntoTableSort').tablesorter();
       }");