代码之家 › 专栏 › 技术社区 › TStamper

JQuery表排序器问题

jquery

TStamper · 技术社区 · 16 年前

我了解到,通过尝试使用jquery中的表排序器插件,表需要使用<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版本”

2 回复 | 直到 16 年前

Russ Cam 16 年前

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

本质上,你需要使用 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在文档就绪时将ad标签插入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>

输出此内容,它与表排序器一起正常工作-

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

E Rolnicki 16 年前

从这里开始。..

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();
       }");