• Demo and Introduction
  • The HTML and CSS Files
  • The jsLib_event.js and jsLib_dom_ready.js Files
  • The report_library.js File
  • The report_library.js File Continued
  • The Complete report_library.js File and the report.js File
  • The Complete report_library.js File and the report.js File

     

    The Complete report_library.js File

    Here is the complete report_library.js file for easier use.

    	 //Create a new object called TableSort that takes two parameters: tableId and lastRow 
    var TableSort = function ( tableId, lastRow ) {
        //the value of the variable that is this
    	var that = this;
    	//if less than 2 arguments are passed to the TableSort object
    	if ( arguments.length < 2) {
    		//the value of lastRow is true
    		lastRow = true;
    	}
    	
        //the value of the table property of the the TableSort object is the value of the id element represented by the value of tableId
        this.table = document.getElementById(tableId);
        
    	//if the table parameter exists and it does not have a node type of 1
        if ( this.table && this.table.nodeType != 1 ) {
            //throw a new error that says "TableSort: Table id is not a DOM element."
    		throw new Error("TableSort: Table id is not a DOM element.");
        }
        //if the tagname property of the table property is not TABLE
    	if ( this.table.tagName != "TABLE" ) {
            //throw a new error that says "TableSort: Table id is not a table element."
    		throw new Error("TableSort: Table id is not a table element.");
        }
    
        //the value of the sortColumn property of the TableSort object is an empty string
        this.sortColumn = "";
        //the value of the sortUp property of the TableSort object is true
    	this.sortUp = true;
        //the value of the imageNodes property of the TableSort object is an empty array
    	this.imageNodes = [];
    	//the value of the lastRow property of the TableSort object is the value of lastRow
    	this.lastRow = lastRow;
    
        //the value of the variable headers is an array of the th tags in the table 
        var headers = this.table.getElementsByTagName("th");
    
        //create variables called header, columnName, imageNode, and imageClick
        var header, columnName, imageNode, imageClick;
        //create a for loop where the variable i is equal to 0, it continues to run while the value of i is less than the length of the headers array, and i increments by one on each loop
    	for ( var i = 0; i < headers.length; i++) {
            //the value of header is the item in the headers array represented by i
    		header = headers[i];
            
            //the value of imageNode is a new "img" element
            imageNode = document.createElement("img");
            
            //the value of columnName is the className property of header
            columnName = header.className;
            //if i equals 0
    		if ( i == 0 ) {
                //the value of the sortColumn property of the TableSort object is the value of columnName
    			this.sortColumn = columnName;
                //the src property of imageNode is "arrows_up.png"
    			imageNode.src = "arrows_up.png";
            //otherwise
    		} else {
                //the src property of imageNode is "arrows_off.png"
    			imageNode.src = "arrows_off.png";
            }
    
            //the value of imageClick is the imageClickHandler method of the TableSort object with the parameter of columnName
            imageClick = this.imageClickHandler(columnName);
            
            //execute the add method of the jsLib event object with the parameters of imageNode, "click", and imageClick
            jsLib.event.add(imageNode, "click", imageClick);
            
            //execute the appendChild method of header with a parameter of imageNode
            header.appendChild(imageNode);
            //the value of the columnName item in the imageNodes array property of the TableSort object is the value of imageNode
    		this.imageNodes[columnName] = imageNode;
        }
        
        //execute the sort method of the TableSort object
        this.sort();
    }
    
    //the imageClickHandler metho of the TableSort object is a function with one parameter: columnName
    TableSort.prototype.imageClickHandler = function (columnName) {
        //the value of the variable that is this
    	var that = this;
        
        //return the following function
        return function () {
            //if the sortColumn property of that equals the value of columnName
            if ( that.sortColumn == columnName ) {
                //toggle the sortUp property of the that object
    			that.sortUp = ! that.sortUp;
            // otherwise
            } else {
                //the src property of the that.sortColumn item in the imageNodes array is "arrows_off.png"
                that.imageNodes[that.sortColumn].src = "arrows_off.png";
                
                //the value of the sortColumn property of that is the value of ColumnName
                that.sortColumn = columnName;
                //the value of the sortUp property of the that object is true
    			that.sortUp = true;
            }
            
            //if the sortUp property of that has a value of true
            if ( that.sortUp ) {
                //the src property of the that.sortColumn item in the imageNodes array is "arrows_up.png"
    			that.imageNodes[that.sortColumn].src = "arrows_up.png";
            } else {
                //the src property of the that.sortColumn item in the imageNodes array is "arrows_down.png"
    			that.imageNodes[that.sortColumn].src = "arrows_down.png";
            }
    		//execute the sort method of the that object
            that.sort();
        }
    }
    
    //the sort method of the TableSort object is defined as
    TableSort.prototype.sort = function () {
        //the value of the variable that is this
    	var that = this;
        //if the sortColumn property of the TableSort object is an empty string, return to the calling function
    	if ( this.sortColumn == "" ) return;
    
        //the value of the variable rowNodes is an array of the tr tags in the table
        var rowNodes = this.table.getElementsByTagName("tr");
        //if the length of the rowNodes array is equal to or less than 1, return to the calling function
    	if (rowNodes.length <= 1 ) return;
    
        //the value of the variable rows is an empty array
        var rows = [];
        //create a for loop where i equals zero, the for loop runs as long as the value of i is less than the length of the rowNodes array, and i increments by 1 each time
    	for ( var i = 0; i < rowNodes.length; i++) {
            //add the item in the rowNodes array represented by the number i to the end of the rows array.
    		rows.push( rowNodes[i] );
        }
    
        //the value of the variable tbodyNode is the parentNode of the first item in the rows array
        var tbodyNode = rows[0].parentNode;
        
        //remove the first item from the rows array
    	rows.shift();
    	
        
        //if the value of the lastRow property of the that object is false
    	if ( that.lastRow == false ) {
    		//the value of the variable totalsRow is the last item in the rows array
    		var totalsRow = rows[rows.length - 1];
    		//remove the row represented by totalsRow from the tbodyNode
    		totalsRow.parentNode.removeChild(totalsRow);
    		//remove the last item from the rows array
    		rows.pop();		
    	}
    	
    
        //the variable isDate is a function with one parameter: value
        var isDate = function ( value ) {
            //the variable d is a new instance of the Date object with a parameter of value
    		var d = new Date(value);
            //return true if value can be converted to a date
    		return ! isNaN(d);
        }
        //the variable isMoney is a function with one parameter: value
    	var isMoney = function ( value ) {
            //the value of the variable m is the replace method of value with the parameters /[$,]/g and an empty string
    		var m = value.replace( /[$,]/g, "" );
            //return true if value is a text string that can be turned into a number
    		return ! isNaN(m);
        }
    
        //the value of the variable direction is 1 if the value of the sortUp property of that is true or -1 if it is false
        var direction = ( that.sortUp ) ? 1 : -1;
        
        //sortRows is a function with the parameters rowA and rowB
        var sortRows = function (rowA, rowB) {
            //create the new variables i, textA, textB, valueA, and valueB
    		var i, textA, textB, valueA, valueB;
            //create the variable cell
    		var cell;
    
            //the value of the variable cellsA is an array of the td tags from rowA
            var cellsA = rowA.getElementsByTagName("td");
            //create a for loop where i equals 0, the loop runs while i is less than the length of the cellsA array, and i increments by 1 on each loop
    		for ( i = 0; i < cellsA.length; i++ ) {
                //the value of cell is the value of the item represented by i in the cellsA array
    			cell = cellsA[i];
                //if the value of the className property of cell equals the value of the sortColumn property of that
    			if ( cell.className == that.sortColumn ) {
                    //the value of valueA is the firstChild nodeValue of  cell
    				valueA = cell.firstChild.nodeValue;
                    //end the function
    				break;
                }
            }
    
            //the value of the variable cellsB is an array of the td tags from rowB
            var cellsB = rowB.getElementsByTagName("td");
            //create a for loop where i equals 0, the loop runs while i is less than the length of the cellsB array, and i increments by 1 on each loop
    		for ( i = 0; i < cellsB.length; i++ ) {
                //the value of cell is the value of the item represented by i in the cellsB array
    			cell = cellsB[i];
                //if the value of the className property of cell equals the value of the sortColumn property of that
    			if ( cell.className == that.sortColumn ) {
                    //the value of valueB is the firstChild nodeValue of cell
    				valueB = cell.firstChild.nodeValue;
                    //end the function
    				break;
                }
            }
    
            //if valueA and valueB are numbers 
            if ( ! isNaN(valueA) && ! isNaN(valueB) ) {
                //the value of valueA is valueA converted to a number with decimal places
    			valueA = parseFloat(valueA);
                //the value of valueB is valueB converted to a number with decimal places
    			valueB = parseFloat(valueB);
            //otherwise, if valueA and valueB can be converted to dates
    		} else if ( isDate(valueA) && isDate(valueB) ) {
                //the value of valueA is a new date object with the parameter of valueA
    			valueA = new Date(valueA);
                //the value of valueB is a new date object with the parameter of valueB
    			valueB = new Date(valueB);
            //otherwise, if valueA and valueB are money values
    		} else if ( isMoney(valueA) && isMoney(valueB) ) {
                //the value of valueA is valueA converted to a number with decimal places that has the dollar signs and commas replaced with empty strings
    			valueA = parseFloat(valueA.replace( /[$,]/g, "" ));
                //the value of valueB is valueB converted to a number with decimal places that has the dollar signs and commas replaced with empty strings
    			valueB = parseFloat(valueB.replace( /[$,]/g, "" ));
            }
    
            //if the value of valueA is less than the value of valueB
            if ( valueA < valueB ) {
                //return -1 multiplied by the value of direction
    			return -1 * direction;
            //otherwise if the value of valueB is less than the value of valueA
    		} else if ( valueB < valueA ) {
                //return 1 multiplied by the value of direction
    			return 1 * direction;
            //otherwise
    		} else {
                //return the number 0
    			return 0;
            }
        }
        
        //execute the sort method of the rows array with the parameter of the function sortRows
        rows.sort( sortRows );
    
        //create a for loop where i equals 0, the loop continues as long as the value of i is less than the length of the rows array, and the value of i is incremented each time through the loop
        for ( i = 0; i < rows.length; i++) {
            //execute the appendChild method of tbodyNode with the parameter of the item in the rows array represented by i
    		tbodyNode.appendChild( rows[i] );
        }
    	
    	//if totalsRow exists in this object
    	if (totalsRow) {
    		//execute the appendChild method of tbodyNode with the parameter of totalsRow
    		tbodyNode.appendChild( totalsRow );
    	}
    }
    	

    The report.js File

    The report.js file is short but very important. It creates the TableSort object when the DOM is ready so that the entire application can run. This is the file that you will need to modify for your application to work correctly. First, you'll need to provide the correct id name for your table. Mine is called "earnings_list", so you can just replace mine with yours. You'll also need to decide whether or not you want the last row of your table to sort along with the table. If you do, you need to change the boolean value from false to true. If you do not want the last row to sort along with the rest of the table, just leave the value as false.

    //create a variable named earningsList
    var earningsList; 
    
    //the ready method of the jsLib.dom object has one parameter: a function which is defined as
    jsLib.dom.ready( function () {
        //earningsList is a new instance of the TableSort object with the parameters of "earnings_list" and false
    	earningsList = new TableSort("earnings_list", false);    
    });
    	

    That's all! I hope you enjoyed this tutorial.

    Previous