tablesorter

Sticky Header Widget

Flexible client-side table sorting

NOTE!

• As of tablesorter version 2.9+, this widget can no longer be applied to versions of tablesorter prior to version 2.8.
• Added cssStickyHeaders_attachTo option (default set to null) in New v2.14.4.
  • Setting this option with either a jQuery selector string (".wrapper") or jQuery object ($(".wrapper")).
  • This option contains the target to which the sticky header will attach - see the second example below.
• Added a widget option named stickyHeaders_cloneId (v2.9)
  • It contains a suffix to add to any table id.
  • Its default value is -sticky
• To access the added sticky table content from your code without worrying about using the ID, you can use table.config.widgetOptions.$sticky.
• Table captions and any additional rows (filter widget row) will also be included in the sticky header (v2.9).
• You will need to modify the headerTemplate option to include the jQuery UI icon! See the example in the code (v2.7).
• Scroll down the page to see the headers stick. Then sort the columns using the sticky headers!
• Added a widget option named stickyHeaders option which contains the css class name applied to the actual sticky header (v2.1). Modified in v2.11 so that "tablesorter-stickyHeader" class is always added and this option only adds additional classes.
• Multiple rows in the header will become sticky (v2.1.17).
• The filter widget adds a row to the table header, but that row will not be included in the sticky header.
• Add the class name sticky-false to any header rows you don't want to become sticky (v2.1.18).
• Because of the limitations of Internet Explorer version 7 and older, this widget will not work.

CSS

/* wrapper of table 2 */
.wrapper {
  position: relative;
  padding: 0 5px;
  height: 250px;
  overflow-y: auto;
}

Javascript

$(function(){

  var options = {
    widthFixed : true,
    showProcessing: true,
    headerTemplate : '{content} {icon}', // Add icon for jui theme; new in v2.7!

    widgets: [ 'uitheme', 'zebra', 'stickyHeaders', 'filter' ],

    widgetOptions: {

      // extra class name added to the sticky header row
      stickyHeaders : '',
      // number or jquery selector targeting the position:fixed element
      stickyHeaders_offset : 0,
      // added to table ID, if it exists
      stickyHeaders_cloneId : '-sticky',
      // trigger "resize" event on headers
      stickyHeaders_addResizeEvent : true,
      // if false and a caption exist, it won't be included in the sticky header
      stickyHeaders_includeCaption : true,
      // The zIndex of the stickyHeaders, allows the user to adjust this to their needs
      stickyHeaders_zIndex : 2,
      // jQuery selector or object to attach sticky header to
      stickyHeaders_attachTo : null,

      // adding zebra striping, using content and default styles - the ui css removes the background from default
      // even and odd class names included for this demo to allow switching themes
      zebra   : ["ui-widget-content even", "ui-state-default odd"],
      // use uitheme widget to apply defauly jquery ui (jui) class names
      // see the uitheme demo for more details on how to change the class names
      uitheme : 'jui'
    }
  };

  $("#table1").tablesorter(options);

  /* make second table scroll within its wrapper */
  options.widgetOptions.stickyHeaders_attachTo = '.wrapper'; // or $('.wrapper')
  $("#table2").tablesorter(options);

});

Demo