Datatables – Fixed Header

I’m sure most developers already know about data tables: http://datatables.net/

It’s a really awesome jQuery plugin that allows you to quickly sort/search your HTML table. It’s really easy to use and there are tons of examples in the site.

To use data tables simply create your HTML table with proper THEAD and TBODY tags then apply data tables to your table:

$(document).ready(function(){

    $('#myTable').dataTable();

});

There are also several plugins to make data tables even more functional and amazing!

One thing that constantly came up in my projects is that when users display a lot of records per page or if they have lower resolution screens then they have a problem remembering which columns contain what data when they scroll down the table since the header is off screen.

I searched for solutions and found several plugins that surround the data table in a DIV and make the DIV scrollable. It works but doesn’t look that nice visually.

 

One useful plugin I found is the Fixed Header  plugin. It’s easy to implement.:

$(document).ready( function () {

    var table = $('#myTable').dataTable();

    new $.fn.dataTable.FixedHeader( table );

} );

This plugin floats the table headers to the top of the window when scrolled so even when you scroll down the page the header is always visible.

Another great thing about this plugin is that it works without using data tables as well.

Go check it out!

• datatable
• jQuery
• plugin