Question

我了解到，通过尝试从jquery使用tablesorter插件，表需要使用＆lt; THEAD＆GT;和
＆LT; TBODY＆GT;标签。我使用的是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>

它看起来像那样但没有＆lt; THEAD＆GT;和＆lt; TBODY＆GT;标签..这将使表分拣机不起作用？有人可以帮我解决这个问题吗？ “.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将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>

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

JQuery表分拣机问题

2 个答案: