• 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 report_library.js File

    This file is the "meat" of the application. It contains all of the main functions that create the sorting application. It is not necessary for you to change anything in this file if you want the application to work as is, but I will explain the different parts below so that you can make changes if necessary.

    Create the TableSort Object and Validate Elements

    The first section of the file creates a new object called TableSort. It declares a new variable named "that", which is the TableSort object. Normally you would just refer to the TableSort object as "this," but what the javascript sees as "this" changes as it processes the code, so it is necessary to create the "that" variable. The next lines of code store a reference to the table element in a property called "table," check to see how many arguments have been passed to the object, and check to make sure that the item referred to as the table is actually a table.

    //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.");
        }
    

    Declare Variables and Property Values

    In this section, initial values are given to some of the properties of the TableSort object. The lastRow value is passed to the TableSort object as an argument when then object is created. This is a boolean value that determines whether the last row sorts along with the rest of the table. If the value is set to false, it does not sort along with the rest of the table but stays at the bottom. In the next few lines, an array called headers is created by gathering all of the elements in the table and new variables are declared for use in the next section.

    	//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 Initial Table State, Attach Event Handlers, and Run the sort Method

    This for loop sets up the initial look of the table. When the application first loads, it sorts the table based off of the first column. The application knows what is considered a column because all of the table items in a particular column are given the same class name in the HTML. Next, image nodes are created for each column and the sorting arrow images are placed in those image nodes. The arrow images are added to the table headers near the end of the for loop. The first column in the table (item 0 in the headers array) is considered "on" so it has the green set of arrows, while the others are considered "off" so they have the grey arrows.

    The event handlers are added to the image nodes in line 27 using the add method from the jsLib.event object in the jslib_event.js file. At the end of the TableSort constructor function, the sort method is called to sort the columns by value.

    	//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();
    }
    	

    Previous Next