var data = [{
"id":1,
"name":"Martin Barker Javascript",
"description":"a Javascript Innovator",
"published":"05/10/2015",
"source_type":"website",
"url":"http://www.jsclasses.org/browse/author/1854.html"
},{
"id":2,
"name":"Martin Barker php",
"description":"a php developer",
"published":"05/10/2015",
"source_type":"website",
"url":"www.phpclasses.org/browse/author/597587.html"
}];
// create a new table builder object
var table = new TableBuilder();
// add the data to the table builder
table.addDataSet(data);
// tell it we want to flag the name column for display
table.addColumnToDisplay("name");
// tell it we want it to change the display from 'name' to 'Name'
table.addCustomHeader("name", "Name");
// tell it we want to flag the description column for display
table.addColumnToDisplay("description");
// tell it we want to flag the published column for display
table.addColumnToDisplay("published");
// tell it we want it to change the display from 'published' to 'Recorded'
table.addCustomHeader("published", "Recorded");
// tell it we want to flag the source_type column for display
table.addColumnToDisplay("source_type");
// tell it we want it to change the display from 'source_type' to 'Source'
table.addCustomHeader("source_type", "Source");
// tell it we want to wrap the value of source_type with
// "<a href='%url%' target='_blank'>" before value where %url% will be evaluated to data[col].url
// "</a>" after value
table.setUpWrapper("source_type", "<a href='%url%' target='_blank'>", "</a>");
// some other options that can be specified
table.setMode("table"); // has support as standard for using HTML Table tag, UL/LI tags set, or OL/LI tags set so you can CSS theme them better
// you can also create modes
var table_my_mode = {
"open":"<table class='tableBuilder custom_table table'>\r\n",
"rowOpen":"<tr class='tableBuilder custom_table_row row'>\r\n",
"headingOpen":"<th class='tableBuilder custom_table_row_heading row heading'>\r\n",
"headingClose":"</th>\r\n",
"columnOpen":"<td class='tableBuilder col custom_table_column'>\r\n",
"columnClose":"</td>\r\n",
"rowClose":"</tr>\r\n",
"close":"</table>\r\n"
}
// so you can save it for later use if you use this method call setMode with your new name
table.createMode("my_table_mode", table_my_mode);
// or you can use and this will automatically set it to use
table.useCustomMode(table_my_mode)
// get the returned HTML Code and save it in variable 'html'
var html = table.GenerateCode();
|
Download
