JQuery table sorter problem

Question

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>

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"

Answer 1

You should take a look here -Code Project Sortable Gridview using JQuery Tablesorter

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

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>

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>

Answer 2

start with this...

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

then do this:

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