I am using tablesorter jquery to sort the column in my table. I want to freeze my table header. Is there any way to do that using tablesorter jquery? Thanks in advance.

My tablesorter code:

("#rates").tablesorter({
    widgets: ['zebra'],
    widgetZebra: {
        css: ["even", "odd"]
    },
    headers: {
        0: {
            sorter: false
        },
        4: {
            sorter: false
        }
    },
    headerClass: 'header',
    sortClassAsc: 'headerSortUp',
    sortClassDesc: 'headerSortDown'
});

I also tried this.

 widgetOptions: {
      stickyHeaders : 'tablesorter-stickyHeader',
  },

I am using tablesorter jquery to sort the column in my table. I want to freeze my table header. Is there any way to do that using tablesorter jquery? Thanks in advance.

My tablesorter code:

("#rates").tablesorter({
    widgets: ['zebra'],
    widgetZebra: {
        css: ["even", "odd"]
    },
    headers: {
        0: {
            sorter: false
        },
        4: {
            sorter: false
        }
    },
    headerClass: 'header',
    sortClassAsc: 'headerSortUp',
    sortClassDesc: 'headerSortDown'
});

I also tried this.

 widgetOptions: {
      stickyHeaders : 'tablesorter-stickyHeader',
  },

• javascript
• jquery
• tablesorter
• displaytag

Share Improve this question Follow edited Jun 21, 2013 at 9:16 kishore asked Jun 21, 2013 at 7:41 kishorekishore 1,64755 gold badges1616 silver badges1717 bronze badges 2

• 1 Your code is missing $ or jQuery? – Broxzier Commented Jun 21, 2013 at 8:01
• Please note the stickyHeaders widget & widgetOptions only work with this fork of tablesorter, not the original from tablesorter.; Tablesorter (either version) does not include options like headerClass, sortClassAsc, sortClassDesc. And lastly, the forked version moved the widgetZebra option into widgetOptions as zebra. – Mottie Commented Feb 20, 2015 at 13:45

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

You can add this to your tablesorter initialization:

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

This would activate 1st row freezing automatically. Make sure to remove exisitng scrolling techniques like: overflow: auto;

See my post about this and how to add your custom HTML header, if needed. Please let me know if it helps :)

Use this code to stick your table header:

  widgetOptions: {

      // css class name applied to the sticky header row (tr)
      stickyHeaders : 'tablesorter-stickyHeader',
  }