How to Make Tables Sortable Using JQuery

Step 1:  Add these two jquery functions.

jQuery.fn.sortTable = (function(sortableRows){

table = $jx(this);

$rows = '';

for($i in sortableRows) {

$rows = $rows + sortableRows[$i];

if (sortableRows[$i+1] != null) {

$rows = $rows + ', ';

}

}
$jx($rows)

.wrapInner('<span title="sort this column"/>')

.each(function(){

var th = $jx(this),

thIndex = th.index(),

inverse = false;
th.click(function(){

table.find('td').filter(function(){

return $jx(this).index() === thIndex;

}).sortElements(function(a, b){
// lowercase letters have higher integer value than the uppercase letters,
// so to avoid error in the sorting process, we make them all uppercase letters

textA = $jx.text([a]).toUpperCase();

textB = $jx.text([b]).toUpperCase();

return  textA > textB ?

inverse ? -1 : 1

: inverse ? 1 : -1;

}, function(){

// parentNode is the element we want to move

return this.parentNode;

});
inverse = !inverse;

});
});

});
/**

* jQuery.fn.sortElements

* --------------

* @param Function comparator:

*   Exactly the same behaviour as [1,2,3].sort(comparator)

*

* @param Function getSortable

*   A function that should return the element that is

*   to be sorted. The comparator will run on the

*   current collection, but you may want the actual

*   resulting sort to occur on a parent or another

*   associated element.

*

*   E.g. $('td').sortElements(comparator, function(){

*      return this.parentNode;

*   })

*

*   The <td>'s parent (<tr>) will be sorted instead

*   of the <td> itself.

*/

jQuery.fn.sortElements = (function(){
var sort = [].sort;
return function(comparator, getSortable) {
getSortable = getSortable || function(){return this;};
var placements = this.map(function(){
var sortElement = getSortable.call(this),

parentNode = sortElement.parentNode,
// Since the element itself will change position, we have

// to have some way of storing its original position in

// the DOM. The easiest way is to have a 'flag' node:

nextSibling = parentNode.insertBefore(

document.createTextNode(''),

sortElement.nextSibling

);
return function() {
if (parentNode === this) {

throw new Error(

"You can't sort elements if any one is a descendant of another."

);

}
// Insert before flag:

parentNode.insertBefore(this, nextSibling);

// Remove flag:

parentNode.removeChild(nextSibling);
};
});
return sort.call(this, comparator).each(function(i){

placements[i].call(getSortable.call(this));

});
};
})();

Step 3: Call the following function to make your table sortable:

$('table-selector').sortTable(['th']);

Where the parameter is an array of the selector of the sortable rows. In the example above, all rows are sortable