Happy Coding: Sticky Table Headers using JQuery

<div style="width:3000px">
  some really really wide content goes here
  </div>
  <table>
  <thead>
<tr>
  <th>
  Full name
  </th>
  <th>
  CCY
  </th>
  <th>
  Last
  </th>
  <th>
  +/-
  </th>
  <th>
  %
  </th>
  <th>
  Bid
  </th>
  <th>
  Ask
  </th>
  <th>
  Volume
  </th>
  <th>
  Turnover
  </th>
  </tr>
  </thead>
  <tbody>
  <tr>
  <td>
  A.P. Møller...
  </td>
  <td>
  DKK
  </td>
  <td>
  33,220.00
  </td>
  <td>
  760
  </td>
  <td>
  2.34
  </td>
  <td>
  33,140.00
  </td>
  <td>
  33,220.00
  </td>
  <td>
  594
  </td>
  <td>
  19,791,910
  </td>
  </tr>
  <tr>
  <td>
  A.P. Møller...
  </td>
  <td>
  DKK
  </td>
  <td>
  34,620.00
  </td>
  <td>
  640
  </td>
  <td>
  1.88
  </td>
  <td>
  34,620.00
  </td>
  <td>
  34,700.00
  </td>
  <td>
  9,954
  </td>
  <td>
  346,530,246
  </td>
  </tr>
  <tr>
  <td>
  Carlsberg A
  </td>
  <td>
  DKK
  </td>
  <td>
  380
  </td>
  <td>
  0
  </td>
  <td>
  0
  </td>
  <td>
  371
  </td>
  <td>
  391.5
  </td>
  <td>
  6
  </td>
  <td>
  2,280
  </td>
  </tr>
  <tr>
  <td>
  Carlsberg B
  </td>
  <td>
  DKK
  </td>
  <td>
  364.4
  </td>
  <td>
  8.6
  </td>
  <td>
  2.42
  </td>
  <td>
  363
  </td>
  <td>
  364.4
  </td>
  <td>
  636,267
  </td>
  <td>
  228,530,601
  </td>
  </tr>
  <tr>
  <td>
  Chr. Hansen...
  </td>
  <td>
  DKK
  </td>
  <td>
  114.5
  </td>
  <td>
  -1.6
  </td>
  <td>
  -1.38
  </td>
  <td>
  114.2
  </td>
  <td>
  114.5
  </td>
  <td>
  141,822
  </td>
  <td>
  16,311,454
  </td>
  </tr>
  <tr>
  <td>
  Coloplast B
  </td>
  <td>
  DKK
  </td>
  <td>
  809.5
  </td>
  <td>
  11
  </td>
  <td>
  1.38
  </td>
  <td>
  809
  </td>
  <td>
  809.5
  </td>
  <td>
  85,840
  </td>
  <td>
  69,363,301
  </td>
  </tr>
  <tr>
  <td>
  D/S Norden
  </td>
  <td>
  DKK
  </td>
  <td>
  155
  </td>
  <td>
  -1.5
  </td>
  <td>
  -0.96
  </td>
  <td>
  155
  </td>
  <td>
  155.1
  </td>
  <td>
  51,681
  </td>
  <td>
  8,037,225
  </td>
  </tr>
  <tr>
  <td>
  Danske Bank
  </td>
  <td>
  DKK
  </td>
  <td>
  69.05
  </td>
  <td>
  2.55
  </td>
  <td>
  3.83
  </td>
  <td>
  69.05
  </td>
  <td>
  69.2
  </td>
  <td>
  1,723,719
  </td>
  <td>
  115,348,068
  </td>
  </tr>
  <tr>
  <td>
  DSV
  </td>
  <td>
  DKK
  </td>
  <td>
  105.4
  </td>
  <td>
  0.2
  </td>
  <td>
  0.19
  </td>
  <td>
  105.2
  </td>
  <td>
  105.4
  </td>
  <td>
  674,873
  </td>
  <td>
  71,575,035
  </td>
  </tr>
  <tr>
  <td>
  FLSmidth & Co.
  </td>
  <td>
  DKK
  </td>
  <td>
  295.8
  </td>
  <td>
  -1.8
  </td>
  <td>
  -0.6
  </td>
  <td>
  295.1
  </td>
  <td>
  295.8
  </td>
  <td>
  341,263
  </td>
  <td>
  100,301,032
  </td>
  </tr>
  <tr>
  <td>
  G4S plc
  </td>
  <td>
  DKK
  </td>
  <td>
  22.53
  </td>
  <td>
  0.05
  </td>
  <td>
  0.22
  </td>
  <td>
  22.53
  </td>
  <td>
  22.57
  </td>
  <td>
  190,920
  </td>
  <td>
  4,338,150
  </td>
  </tr>
  <tr>
  <td>
  Jyske Bank
  </td>
  <td>
  DKK
  </td>
  <td>
  144.2
  </td>
  <td>
  1.4
  </td>
  <td>
  0.98
  </td>
  <td>
  142.8
  </td>
  <td>
  144.2
  </td>
  <td>
  78,163
  </td>
  <td>
  11,104,874
  </td>
  </tr>
  <tr>
  <td>
  Københavns ...
  </td>
  <td>
  DKK
  </td>
  <td>
  1,580.00
  </td>
  <td>
  -12
  </td>
  <td>
  -0.75
  </td>
  <td>
  1,590.00
  </td>
  <td>
  1,620.00
  </td>
  <td>
  82
  </td>
  <td>
  131,110
  </td>
  </tr>
  <tr>
  <td>
  Lundbeck
  </td>
  <td>
  DKK
  </td>
  <td>
  103.4
  </td>
  <td>
  -2.5
  </td>
  <td>
  -2.36
  </td>
  <td>
  103.4
  </td>
  <td>
  103.8
  </td>
  <td>
  157,162
  </td>
  <td>
  16,462,282
  </td>
  </tr>
  <tr>
  <td>
  Nordea Bank
  </td>
  <td>
  DKK
  </td>
  <td>
  43.22
  </td>
  <td>
  -0.06
  </td>
  <td>
  -0.14
  </td>
  <td>
  43.22
  </td>
  <td>
  43.25
  </td>
  <td>
  167,520
  </td>
  <td>
  7,310,143
  </td>
  </tr>
  <tr>
  <td>
  Novo Nordisk B
  </td>
  <td>
  DKK
  </td>
  <td>
  552.5
  </td>
  <td>
  -3.5
  </td>
  <td>
  -0.63
  </td>
  <td>
  550.5
  </td>
  <td>
  552.5
  </td>
  <td>
  843,533
  </td>
  <td>
  463,962,375
  </td>
  </tr>
  <tr>
  <td>
  Novozymes B
  </td>
  <td>
  DKK
  </td>
  <td>
  805.5
  </td>
  <td>
  5.5
  </td>
  <td>
  0.69
  </td>
  <td>
  805
  </td>
  <td>
  805.5
  </td>
  <td>
  152,188
  </td>
  <td>
  121,746,199
  </td>
  </tr>
  <tr>
  <td>
  Pandora
  </td>
  <td>
  DKK
  </td>
  <td>
  39.04
  </td>
  <td>
  0.94
  </td>
  <td>
  2.47
  </td>
  <td>
  38.8
  </td>
  <td>
  39.04
  </td>
  <td>
  350,965
  </td>
  <td>
  13,611,838
  </td>
  </tr>
  <tr>
  <td>
  Rockwool In...
  </td>
  <td>
  DKK
  </td>
  <td>
  492
  </td>
  <td>
  0
  </td>
  <td>
  0
  </td>
  <td>
  482
  </td>
  <td>
  492
  </td>
  <td></td>
  <td></td>
  </tr>
  <tr>
  <td>
  Rockwool In...
  </td>
  <td>
  DKK
  </td>
  <td>
  468
  </td>
  <td>
  12
  </td>
  <td>
  2.63
  </td>
  <td>
  465.2
  </td>
  <td>
  468
  </td>
  <td>
  9,885
  </td>
  <td>
  4,623,850
  </td>
  </tr>
  <tr>
  <td>
  Sydbank
  </td>
  <td>
  DKK
  </td>
  <td>
  95
  </td>
  <td>
  0.05
  </td>
  <td>
  0.05
  </td>
  <td>
  94.7
  </td>
  <td>
  95
  </td>
  <td>
  103,438
  </td>
  <td>
  9,802,899
  </td>
  </tr>
  <tr>
  <td>
  TDC
  </td>
  <td>
  DKK
  </td>
  <td>
  43.6
  </td>
  <td>
  0.13
  </td>
  <td>
  0.3
  </td>
  <td>
  43.5
  </td>
  <td>
  43.6
  </td>
  <td>
  845,110
  </td>
  <td>
  36,785,339
  </td>
  </tr>
  <tr>
  <td>
  Topdanmark
  </td>
  <td>
  DKK
  </td>
  <td>
  854
  </td>
  <td>
  13.5
  </td>
  <td>
  1.61
  </td>
  <td>
  854
  </td>
  <td>
  855
  </td>
  <td>
  38,679
  </td>
  <td>
  32,737,678
  </td>
  </tr>
  <tr>
  <td>
  Tryg
  </td>
  <td>
  DKK
  </td>
  <td>
  290.4
  </td>
  <td>
  0.3
  </td>
  <td>
  0.1
  </td>
  <td>
  290
  </td>
  <td>
  290.4
  </td>
  <td>
  94,587
  </td>
  <td>
  27,537,247
  </td>
  </tr>
  <tr>
  <td>
  Vestas Wind...
  </td>
  <td>
  DKK
  </td>
  <td>
  90.15
  </td>
  <td>
  -4.2
  </td>
  <td>
  -4.45
  </td>
  <td>
  90.1
  </td>
  <td>
  90.15
  </td>
  <td>
  1,317,313
  </td>
  <td>
  121,064,314
  </td>
  </tr>
  <tr>
  <td>
  William Dem...
  </td>
  <td>
  DKK
  </td>
  <td>
  417.6
  </td>
  <td>
  0.1
  </td>
  <td>
  0.02
  </td>
  <td>
  417
  </td>
  <td>
  417.6
  </td>
  <td>
  64,242
  </td>
  <td>
  26,859,554
  </td>
  </tr>
  </tbody>
  </table>
  <div style="height: 4000px">
  lots of content down here...
  </div>

$(function(){
  $("table").stickyTableHeaders();
});

(function ($) {
  $.StickyTableHeaders = function (el, options) {
  // To avoid scope issues, use 'base' instead of 'this'
  // to reference this class from internal events and functions.
  var base = this;

  // Access to jQuery and DOM versions of element
  base.$el = $(el);
  base.el = el;

  // Add a reverse reference to the DOM object
  base.$el.data('StickyTableHeaders', base);

  base.init = function () {
  base.options = $.extend({}, $.StickyTableHeaders.defaultOptions, options);

  base.$el.each(function () {
  var $this = $(this);
  $this.wrap('<div class="divTableWithFloatingHeader" style="position:relative"></div>');

  var originalHeaderRow = $('tr:first', this);
  originalHeaderRow.before(originalHeaderRow.clone());
  var clonedHeaderRow = $('tr:first', this);

  clonedHeaderRow.addClass('tableFloatingHeader');
  clonedHeaderRow.css('position', 'fixed');
  clonedHeaderRow.css('top', '0px');
  clonedHeaderRow.css('left', $this.css('margin-left'));
  clonedHeaderRow.css('display', 'none');

  originalHeaderRow.addClass('tableFloatingHeaderOriginal');

  // enabling support for jquery.tablesorter plugin
  $this.bind('sortEnd', function (e) { base.updateCloneFromOriginal(originalHeaderRow, clonedHeaderRow); });
  });

  base.updateTableHeaders();
  $(window).scroll(base.updateTableHeaders);
  $(window).resize(base.updateTableHeaders);
  };

  base.updateTableHeaders = function () {
  base.$el.each(function () {
  var $this = $(this);
  var $window = $(window);

  var fixedHeaderHeight = isNaN(base.options.fixedOffset) ? base.options.fixedOffset.height() : base.options.fixedOffset;

  var originalHeaderRow = $('.tableFloatingHeaderOriginal', this);
  var floatingHeaderRow = $('.tableFloatingHeader', this);
  var offset = $this.offset();
  var scrollTop = $window.scrollTop() + fixedHeaderHeight;
  var scrollLeft = $window.scrollLeft();

  if ((scrollTop > offset.top) && (scrollTop < offset.top + $this.height())) {
  floatingHeaderRow.css('top', fixedHeaderHeight + 'px');
  floatingHeaderRow.css('margin-top', 0);
  floatingHeaderRow.css('left', (offset.left - scrollLeft) + 'px');
  floatingHeaderRow.css('display', 'block');

  base.updateCloneFromOriginal(originalHeaderRow, floatingHeaderRow);
  }
  else {
  floatingHeaderRow.css('display', 'none');
  }
  });
  };

  base.updateCloneFromOriginal = function (originalHeaderRow, floatingHeaderRow) {
  // Copy cell widths and classes from original header
  $('th', floatingHeaderRow).each(function (index) {
  $this = $(this);
  var origCell = $('th', originalHeaderRow).eq(index);
  $this.removeClass().addClass(origCell.attr('class'));
  $this.css('width', origCell.width());
  });

  // Copy row width from whole table
  floatingHeaderRow.css('width', originalHeaderRow.width());
  };

  // Run initializer
  base.init();
  };

  $.StickyTableHeaders.defaultOptions = {
  fixedOffset: 0
  };

  $.fn.stickyTableHeaders = function (options) {
  return this.each(function () {
  (new $.StickyTableHeaders(this, options));
  });
  };

})(jQuery);

Happy Coding

7 Nov 2011

Sticky Table Headers using JQuery

No comments:

Post a Comment

SSRS: Configure User Authentication with ReportCredentials

Search This Blog