table-sort.js

/*
 * Copyright 2012 LinkedIn Corp.
 * 
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not
 * use this file except in compliance with the License. You may obtain a copy of
 * the License at
 * 
 * http://www.apache.org/licenses/LICENSE-2.0
 * 
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations under
 * the License.
 */

$.namespace('azkaban');

azkaban.TableSorter = Backbone.View.extend({
  events: {
  	"click .sortable": "handleClickSort"
  },

  initialize: function(settings) {
  	$(this.el).addClass("sortableTable");
  
		var thead = $(this.el).children("thead");
		var th = $(thead).find("th");
		
		$(th).addClass("sortable");
		$("th.ignoresort").removeClass("sortable");
		var sortDiv = document.createElement("div");

		$(sortDiv).addClass("sortIcon");
		
		$(th).append(sortDiv);
		
		var tbody = $(this.el).children("tbody");
		var rows = $(tbody).children("tr");
		
		var row;
		for (var i = 0; i < rows.length; ++i ) {
			var nextRow = rows[i];
			if (row && $(nextRow).hasClass("childrow")) {
				if (!row.childRows) {
					row.childRows = new Array();
				}
				row.childRows.push(nextRow);
			}
			else {
				row = nextRow;
			}
		}
		
		if (settings.initialSort) {
			this.toggleSort(settings.initialSort);
		}
  },

  handleClickSort: function(evt) {
  	this.toggleSort(evt.currentTarget);
  },
  
	toggleSort: function(th) {
  	console.log("sorting by index " + $(th).index());
  	if ($(th).hasClass("asc")) {
  		$(th).removeClass("asc");
  		$(th).addClass("desc");
  		// Sort to descending
  		
  		this.sort($(th).index(), true);
  	}
  	else if ($(th).hasClass("desc")) {
  		$(th).removeClass("desc");
  		$(th).addClass("asc");
  		
  		this.sort($(th).index(), false);
  	}
  	else {
  		$(th).parent().children(".sortable").removeClass("asc").removeClass("desc");
  		$(th).addClass("asc");
  		
  		this.sort($(th).index(), false);
  	}
  },
  
	sort: function(index, desc) {
		var tbody = $(this.el).children("tbody");
		var rows = $(tbody).children("tr");

		var tdToSort = new Array();
		for (var i = 0; i < rows.length; ++i) {
			var row = rows[i];
			if (!$(row).hasClass("childrow")) {
				var td = row.children[index];
				tdToSort.push(td);
			}
		}

		if (desc) {
			tdToSort.sort(function(a,b) {
				var texta = $(a).text().trim().toLowerCase();
				var textb = $(b).text().trim().toLowerCase();
				
				if (texta < textb) {
					return 1;
				}
				else if (texta > textb) {
					return -1;
				} 
				else {
					return 0;
				}
			});
		}
		else {
			tdToSort.sort(function(a,b) {
				var texta = $(a).text().trim().toLowerCase();
				var textb = $(b).text().trim().toLowerCase();
				
				if (texta < textb) {
					return -1;
				}
				else if (texta > textb) {
					return 1;
				} 
				else {
					return 0;
				}
			});
		}

		var sortedTR = new Array();
		for (var i = 0; i < tdToSort.length; ++i) {
			var tr = $(tdToSort[i]).parent();
			sortedTR.push(tr);
			
			var childRows = tr[0].childRows;
			if (childRows) {
				for(var j=0; j < childRows.length; ++j) {
					sortedTR.push(childRows[j]);
				}
			}
		}
		
		for (var i = 0; i < sortedTR.length; ++i) {
			$(tbody).append(sortedTR[i]);
		}
  },

  render: function() {
  	console.log("render sorted table");
  }
});