tablesorter stickyHeaders – allowing HTML header

· CSS, HTML, jQuery, tablesorter
Authors

Tablesorter by itself works great – it embeds into each HTML table  nicely, wherever it is.

$(‘#my_table’).tablesorter();

 

But when you have many rows, without paging, you might want to freeze the 1st row (the column row). Here tablesorter allows a nice widget to run:

$(‘table’).tablesorter({
  widgets: [‘stickyHeaders’]}

)

The widget seemlessly imlements a double header mechanism:

  1. Your original table header – active as long as you didn’t scroll at all, or when there are few rows to create a scroll
  2. A duplicate table header – replacing the original one as soon as your table need scrolling. It uses a simple show/hide technique

An important issue is to remove your existing overflow: auto; code from your containing element, if you had any, otherwise it would conflict with the component scrolling technique.

 

Now, what if you need some HTML header before your table starts? (pretty common need)

You’ll need all of these steps to achieve that (again, because of the tablesorter scrolling mechanism):

  1. Add a widget option with your desire OFFSET from the top: 

    $(‘table’).tablesorter({
      widgets: [stickyHeaders’],
      widgetOptions: {
      stickyHeaders_offset: OFFSET 
      }}

  2. Add these CSS to your header div: 

    #divHeader
    {
    position: fixed;
    top: 0px;
    height: OFFSETpx;
    width: 100%; //to cover all the rows scrolling in the back…
    background-color: White; //to cover all the rows scrolling in the back…
    }

  3. Add this CSS to your main div containing your table: margin-top: OFFSETpx;

This way you’ll achieve smooth table sticky-enabled scrolling, with your custom HTML header 🙂

2 Comments

Comments RSS
  1. Amitava Karan

    hi @krispil,

    Where is the “divHeader” element locate?

  2. mor krispil

    Hi Karan,

    It has a ‘fixed’ position, so it doesn’t really matter.
    However, since it’s a ‘header’, after all, I’d physically locate it before the tablesorter element, just to make the html more logical / readable to others.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: