DP_ObCollection Ordered:
Sort a Table by Column Values

Here is an example of using the DP_ObCollectionOrdered with a generated HTML table. We first create an instance of DP_ObCollectionOrdered called "MyData" to hold the data to be displayed. Finally we create a function to display this data as a table with clickable controls to resort the collection and recreate the table.

The vast majority of the code in this example is formatting for the table. All of the complexity of sorting and managing the data has been extracted into the collection. Also note that the data has been kept neatly and logically away from the presentation of that data.

You could modify the presentation to your hearts content (move columns, change from tables to CSV, etc) without ever having to change the data population or access code. Lastly it's significantly simpler to do things this way than to use the DOM to access individual table cells.

This simple example could, of course, be expanded with the ability to remember the sort order of a column (allowing you to easily sort both ascending and descending data) or to change the presentation of the sorted column header or column data.

The code for the above form and the related script follows:

<script type="text/javascript" src="Archives/DP_ObCollectionOrdered.js"></script>
<script type="text/javascript">

	// Let's first create an instance of DP_ObCollectionOrdered called "MyOptions"
	// Since we're creating a collection of "plain" objects we pass in Object as the constructor.
	// We'll use the "ID" property of the Option class as our unique key.
MyData = new DP_ObCollectionOrdered("id", Object);

	// Now we'll create a few Objects using JavaScript literal notation and simultaneously add them to the collection using the add() method
MyData.add( {id: 1, fname: "Jim", lname: "Davis", age: 34} );
MyData.add( {id: 2, fname: "Carol", lname: "Houghtaling", age: 35} );
MyData.add( {id: 3, fname: "Paxton", lname: "Herbert", age: 7} );
MyData.add( {id: 4, fname: "Matilda", lname: "Rose", age: 3} );

	// This function populates the select box with the contents of the collection
	// Note the use of the getCount() and getAt() methods
function drawTable() {
	var MyTable = "";
		// Add the table
	MyTable += "<table style='width: 70%; border: #CCCCCC 1px solid; margin: 20px 15% 20px 15%;'>";
		// Add the table header
	MyTable += "<tr>";
	MyTable += "	<td style='padding: 5px;'><a href='#' onclick=\"MyData.sortByProp('id', 'Numeric', 'asc'); drawTable(); return false;\">ID</a></td>";
	MyTable += "	<td style='padding: 5px;'><a href='#' onclick=\"MyData.sortByProp('fname', 'Alpha', 'asc'); drawTable(); return false;\">First Name</a></td>";
	MyTable += "	<td style='padding: 5px;'><a href='#' onclick=\"MyData.sortByProp('lname', 'Alpha', 'asc'); drawTable(); return false;\">Last Name</a></td>";
	MyTable += "	<td style='padding: 5px;'><a href='#' onclick=\"MyData.sortByProp('age', 'Numeric', 'asc'); drawTable(); return false;\">Age</a></td>";
	MyTable += "</tr>";
		// Loop over the Collection and add the rows to the table
	for(Cnt=0; Cnt < MyData.getCount(); Cnt++) {
		MyTable += "<tr>";
		MyTable += "	<td style='padding: 5px;'>" + MyData.getAt(Cnt).id + "</td>";
		MyTable += "	<td style='padding: 5px;'>" + MyData.getAt(Cnt).fname + "</td>";
		MyTable += "	<td style='padding: 5px;'>" + MyData.getAt(Cnt).lname + "</td>";
		MyTable += "	<td style='padding: 5px;'>" + MyData.getAt(Cnt).age + "</td>";
		MyTable += "</tr>";
	};
	MyTable += "</table>";
		// Add the HTML for the table to the page
	document.getElementById("MyTable").innerHTML = MyTable;
};
	// Call the drawTable function for the first time
drawTable();
</script>