JQuery table sorting task
I found out that when trying to use the tablesorter plugin from jquery, the table must use <thead> and
<tbody>. I am using an html table and I am using the runat = "server" attribute because I need to bind data to the server side table. but using the runat = server attribute the code is rendered differently .. instead of the view source similar to 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 this, but without the <thead> and <tbody>, what would make the table sorter unusable? can anyone help me fix this? ".NET 3.5 sp1 is the version I am using"
source to share
You should look here - Project Code Sorting Gridview Using JQuery Tablesorter
Basically, you need to use the UseAccessibleHeader property on the Gridview for the aad tag to be displayed 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 an html table with runat = "server" attribute instead of asp.net server controls, there seems to be no easy way to prevent thead tags from being rendered from missing in the html output. You can use JQuery to insert adad tags into the DOM on the finished document -
//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>
source to share
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 the following:
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();
}");
source to share