Thursday, October 16, 2008

Adding thead to a Table Generated with ASP Datagrid using jQuery

Datagrid doesn't let you insert thead, tbody, or tfoot into your html. I wanted to scroll the table body and not the head using this plugin.

<script>
jQuery("document").ready( function() {

//Make the table scroll with the header/footer stuck in place
var mytable = jQuery("#myTableID"); var h = mytable.height();
//Add the thead that datagrid omits:
mytable.prepend(document.createElement('thead'));
//Move the first row from tbody to thead:
jQuery("#myTableID thead").append(jQuery("#myTableID tbody tr:eq(0)"));
mytable.Scrollable(400 < h ? 400 : h, ct.width() + 30);
});
</script>


If you have multiple header rows, just rerun the append line unmodified as many times as you have rows.

No comments: