JQuery表分拣机问题

Question

我了解到,通过尝试从jquery使用tablesorter插件,表需要使用<thead>和
<tbody>标签.我使用的是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>

它看起来像那样但没有<thead>和<tbody>标签..这将使表分类器不起作用？有人可以帮我解决这个问题吗？".NET 3.5 sp1是我正在使用的版本"

Answer 1

你应该看看这里 - 使用JQuery Tablesorter的Code Project Sortable Gridview

实质上,您需要使用Gridview 的UseAccessibleHeader属性,以便在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将thead标签插入到文档就绪的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>