Table Fixed Header - Sortable

by rajeshpillai

HTML

<div>Table Sorter</div>
<table id="tbl" border="1" >
 <thead>
  <tr>

  <th>SrNo</th>
  <th>Name</th>
  </tr>
  </thead>
  <tbody>
    <tr><td>1</td>
        <td>test 1</td>
    </tr>
        <tr><td>2</td>
        <td>test 2</td>
    </tr>
        <tr><td>3</td>
        <td>test 3</td>
    </tr>
          <tr><td>4</td>
        <td>test 1</td>
    </tr>
          <tr><td>5</td>
        <td>test 1</td>
    </tr>
          <tr><td>6</td>
        <td>test 1</td>
    </tr>
          <tr><td>8</td>
        <td>test 1</td>
    </tr>
          <tr><td>9</td>
        <td>test 1</td>
    </tr>
          <tr><td>10</td>
        <td>test 1</td>
    </tr>
      
  </tbody>
 </table>

CSS

.scrollbar-measure {
  width: 100px;
  height: 100px;
  overflow: scroll;
  position: absolute;
  top: -9999px;
}



th.sortable {
    color: #666;
    cursor: pointer;
    text-decoration: underline;
}
th.sortable:hover { color: black; }
th.sorted-asc, th.sorted-desc  { color: black; }
.sorted { background-color: #77c7de; }

JavaScript

var QF = {
    elems: [],
    //Array to save all the elements found by the functions getById, getByC
    //Get all elements by Id
    //It could take more than one parameter
    getById: function() {
        var tempElems = []; //temp Array to save the elements found
        for (var i = 0; i < arguments.length; i++) {
            if (typeof arguments[i] === 'string') { //Verify if the parameter is an string
                tempElems.push(document.getElementById(arguments[i])); //Add the element to tempElems
            }
        }
        this.elems = tempElems; //All the elements are copied to the property named elems
        return this; //Return this in order to chain
    },


    //Add a new class to the elements
    //This does not delete the all class, it just add a new one
    addClass: function(name) {
        for (var i = 0; i < this.elems.length; i++) {
            this.elems[i].className += ' ' + name; //Here is where we add the new class
        }
        return this; //Return this in order to chain
    },


    //Add an Event to the elements found by the methods: getById and getByClass
    //--Action is the event type like 'click','mouseover','mouseout',etc
    //--Callback is the function to run when the event is triggered
    on: function(action, callback) {
        if (this.elems[0].addEventListener) {
            for (var i = 0; i < this.elems.length; i++) {
                this.elems[i].addEventListener(action, callback, false); //Adding the event by the W3C for Firefox, Safari, Opera...   
            }
        }
        else if (this.elems[0].attachEvent) {
            for (var i = 0; i < this.elems.length; i++) {
                this.elems[i].attachEvent('on' + action, callback); //Adding the event to Internet Explorer :(
            }
        }
        return this; //Return this in order to chain
    },

    //Append Text into the elements
    //Text is the string to insert
    appendText: function(text) {
        text =...