CODEWITHSUNDEEP
jquery
TStamper
TStamper

Reputation: 30364

JQuery table sorter problem

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"

Upvotes: 1

Views: 5955

Answers (2)

Russ Cam
Russ Cam

Reputation: 125488

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>

Upvotes: 6

E Rolnicki
E Rolnicki

Reputation: 1717

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

Upvotes: 0

Related Questions