CoreTable - Demo

Download this SourceCode The benfit of downloading instead of copy-paste the code is, that the tabs stay tabs...

<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">

<title>CoreTable - Demo</title>
<script type='text/javascript' src='scripts/core/stdfuncs.js'></script>
<script type='text/javascript' src='scripts/core/app.js'></script>

<link rel='stylesheet' type='text/css' href='../coretable.css'>
<script>

// Define the column to show, their captions and widths.
var spalten = ['fullname', 'birthday', 'income'];
var spaltenTitel = {'fullname':'Full Name', 'birthday':'Date of birth', 'income':'Salery'};
var spaltenBreiten = {'fullname':250, 'birthday':100, 'income':100};

// Define the data to show in the table. This time the keys do not correspond to the column-name.
// The renderer will correct this, it will show the fields "name" followed be "firstname" in the column "fullname"
var daten = [];
daten[0] = {'name':'Müller', 'firstname':'Marius', 'birthday':'1946-04-24.', 'income':87400};
daten[1] = {'name':'Maier', 'firstname':'Andrea', 'birthday':'1982-06-12', 'income':102300};
daten[2] = {'name':'Huber', 'firstname':'Sybille', 'birthday':'1988-08-14', 'income':96740};
daten[3] = {'name':'Gerber', 'firstname':'Robert', 'birthday':'1952-11-04', 'income':65800};
daten[4] = {'name':'Hagmann', 'firstname':'Lisa', 'birthday':'1966-01-09', 'income':85400};

/**
* Define the "Class" that should act as renderer. It has to provide a method "translateValue(col, record)"
* The table will call this method an pass the data-values passed to table,expecting to get the data to display in the table-cell.
* A renderer may be used to roemat data-values before displaying them ('birthday' and 'income') or to
* display a combination of to data-values in one table cell.
*/
function cellRenderer() {

this.translateValue = translateValue;

function translateValue(col, record) {
var cellContent = "";
switch (col) {
case 'fullname':

// generate the content to display in the column "fullname", "name" followed by "firstname"
cellContent = record['name']+", "+record['firstname']
break;
case 'birthday':

// format the SQL-Formatted date strint (YYYY-MM-DD) int an euopean style formatted date (MM.DD.YYYY).
// "std" is global available since the file "stdfuncs.js" is included.
cellContent = std.sqlDate2euroDate(record[col])
break;
case 'income':
// formats the income to get a readable cell-content,e.g. 46599 will become 46'599;
cellContent = std.number_format(record[col], 0, ".", "'");
break;
}

return cellContent;
}

}

function initSite() {
importJS('modules/tools/table.js');
waitWhileLoading();
}

function waitWhileLoading() {
if (isScriptLoading() == true) {
setTimeout(waitWhileLoading, 50);
}
else {
setTimeout(startApplication, 250);
}
}

function startApplication() {
// Instatiate the renderer object, on order to pass it to the table using the table's "setRenderer" function.
// Afterwards the table will always call the renderer istead of displaying ndirectly the data when it has to display a cell of
// the given columns. In this example all columns will be displayed using the renderer, but it's also possible to set
// a rederer for some columns and for some others not. Even different renderers for different columns are possible.
var rederer = new cellRenderer();
var tabelle = new datatable('tabelle', spalten, spaltenTitel, spaltenBreiten);

// Telling the table to use the renderer to display the specified columns.
tabelle.setRenderer('fullname', rederer);
tabelle.setRenderer('birthday', rederer);
tabelle.setRenderer('income', rederer);

// Telling the table to display the income right-aligned
tabelle.setColumnFormat('income', "align='right'");

// Tells the table to use alternating background colors. Theoretically any HTML-Attributes may be passed, typically
// style and/or class will be used to do this. Note that an array of hashtables is passed to table.
tabelle.setAlternation([{'style':'background-color: #ffffdd;'}, {'style':'background-color: white;'}]);

tabelle.drawTable(daten);
}
</script>
</head>

<body onload='initSite()'>

<table><tr><td valign='top'>

<h2>Demonstration of a table using a renderer to show nicely formatted data</h2>
<div id='tabelle'></div>

</body>
</html>

Demonstration of a table using a renderer to show nicely formatted data

Source Code of this Website: