One of the problems of using a GridView with a lot of the table plug-ins for jQuery or any other JavaScript table library is that the library expects your html to be well formatted with your table headers appearing within a thead.  Example below.

<table>
	<thead>
		<tr><th>Header</th></tr>
	</thead>
	<tbody>
		<tr><td>Data</td></tr>
	</tbody>
</table>

The problem is that a GridView does not format the table correctly.  Below is a simple Extension Method used to clean up after your GridView to make it output clean html for use with JavaScript table frameworks.

GridView Extension method for clean html output

public static void FixThead(this GridView grid)
{
    if (grid.Rows.Count > 0)
    {
        //This replaces <td> with <th> and adds the scope attribute
        grid.UseAccessibleHeader = true;
        grid.HeaderRow.TableSection = TableRowSection.TableHeader;
    }
}

There you have it is as easy as that.