jQuery表排序问题 [英] JQuery table sorter problem

问题描述

我了解到，通过尝试使用jquery中的tablesorter插件，表格需要使用< thead>和
< tbody>标签.我正在使用html表，并且使用runat ="server"属性，因为我需要将数据绑定到服务器端的表上.但是通过使用runat = server属性，代码以不同的方式呈现..而不是像这样的视图源，即我的标记视图中的内容:

I learned that by trying to use the tablesorter plug in from jquery the table needs to use the < thead> and
< tbody> tags. I am using an html table, and I use the runat="server" attribute because I need to bind data to the table on the server side. but by using the runat= server attribute the code is rendered in a different way..instead of the view source looking like this which is what is in my markup view :

<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是我正在使用的版本"

it looks like that but without the < thead> and < tbody> tags.. which will make the table sorter not work? can someone help me fix this? " .NET 3.5 sp1 is the version I am using"

推荐答案

您应该在这里看看-基本上，您需要使用 UseAccessibleHeader属性，以便在HTML输出中输出thead标签.

Essentially, you need to use the UseAccessibleHeader property of the Gridview so that a thead tag is outputted in the HTML output.

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

if using a html table with the runat="server" attribute instead of asp.net server controls, it looks as though there isn't an easy way to prevent the thead tags from not rendering in the html output. You could use some JQuery to insert thead tags into the DOM on document ready-

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

outputs this, which works correctly with 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>

这篇关于jQuery表排序问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！