A common operation for me is to regenerate data extracted from an SQL query as a visible table that can allow a a programatic interaction with that data. To simplify this work I wrote this pure JavaScript class which can take a single or multi-dimensional array from an sql query. If you do not need any way to programitcally interface with this table it is functional without any additional includes. To access row data I intended this to be used with jQuery.
The table creates an extra HTML attribute called info which contain the value of the first column in that row. Per row the column is identified by the heading title and an additional user defined string that comes in the format.
To provide even more opportunity for options an inner object which allows additional options per row to be set. These additional columns allow you to add user defined ids to which differ from the unique column ids. An example would be the ability to select a row for a click action that adds the contents of the row to another list. The contents of an “additionalOption” can also include image references. These additionalOptions are not requried and can be ignored if not needed.
An example implementation:
AjaxGet("Sources/gradebook/coursebyStudent.php", //this is a php file which handles an SQL query and returns its results as JSON
{StudID : user.userid},
function(data){ //the params sent to the php file
var courses = new Array();
var Headers = new Array();
Headers.push("Course Name"); //this query only returns one column so we only register one header
//if the query returns more columns you need to register more headers
$.each(data, function(i, coursename){ //jQuery each to organize the data from the rows into an array
courses.push(coursename.coursename);
});
var additionalOptions = new Array(); //sets up an array to store the additional options
//This creates an option that will show up at the end of the row with the text [Select] and the id Select-Feedback
//the colums row header will be Select as per the last parameter
additionalOptions.push(TableTools.NewOption("","Select-Feedback","[Select]", "Select"));
$("#user-course-list").html(TableTools.buildTableFromData(Headers, courses, "feedback", additionalOptions));
});
The Module:
/**
* Builds a table based upon a an sql result array
* @author Paul Scarrone (NuRelm)
*/
TableTools = new function buildTableFromData(){
/**
* Inner Class Object to keep track of Options
* Assignment is done by NewOption which return a blank object
* @param Info
* @param ID
* @param Text
* @param Title
*/
function Options(Info, ID, Text, Title){
this.Info = Info;
this.ID = ID;
this.Text = Text;
if(typeof(Title) == "undefined"){
this.Title = ID.replace("-"," ");
}else{
this.Title = Title;
}
};
/**
* Creates and constructs a new Options Object
* @param Info
* @param ID
* @param Text
* @param Title
* @return the constructed Options Object
*/
this.NewOption = function(Info, ID, Text, Title){
return new Options(Info, ID, Text, Title);
};
/**
* Builds a table based upon an SQL result set
* @param Headers The headers of the SQL Result in an array
* @param Rows The Row Data in a single or multi-dimentional array
* @param linemod a tack on string to the id field of each row so html id don't collide
* @param additionalOptions an array of Option Objects that will appear at the end of the rows
* (Generally for adding buttons to a row) uses the first colum as a key field
* @return the HTML for the table
*/
this.buildTableFromData = function(Headers, Rows, linemod, additionalOptions){
var table = '';
if(Rows.length < 1){
table +="No Results";
return table;
}
table += "| "+Headers[i]+" | " } if(typeof(additionalOptions) != "undefined"){ for(var l in additionalOptions){ table +=""+additionalOptions[l].Title+" | "; } } var colnum = Headers.length; for(var i in Rows){ table += "|
|---|---|---|
| "+additionalOptions[l].Text+" | "; } } }else{ table += ""+Rows[i]+" | "; if(typeof(additionalOptions) != "undefined"){ for(var l in additionalOptions){ if(additionalOptions[l].Info == ""){ additionalOptions[l].Info = Rows[i]; } table += ""+additionalOptions[l].Text+" | "; } } } table += "
To Download: Click Here
Software Engineer and Code Enthusiast. I often shout, "For you, Object Oriented Programming was something that happened to other people". I am a web programmer by trade but I dable in machine learning through text analysis. (Wub Wub)