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/app.js'></script>
<script type='text/javascript' src='scripts/core/stdfuncs.js'></script>

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

// define the columns to be shown in the table.
var spalten = ['name', 'firstname', 'birthday'];

// define the testdata to be displayed by the table. In a productional environment the data will hardly be statically
// defined but may be the result of a database query (e.g. via AJAX).
var daten = [];
daten[0] = {'name':'Müller', 'firstname':'Marius', 'birthday':'24.04.1946'};
daten[1] = {'name':'Maier', 'firstname':'Andrea', 'birthday':'12.06.1982'};
daten[2] = {'name':'Huber', 'firstname':'Sybille', 'birthday':'14.08.1988'};
daten[3] = {'name':'Gerber', 'firstname':'Robert', 'birthday':'04.11.1952'};
daten[4] = {'name':'Hagmann', 'firstname':'Lisa', 'birthday':'09.01.1966'};

/**
* The function "initSite" is called if the HTML Site is completly loaded. The function loads the Javascript-class of the table
* dynamically. The call of "waitWhileLoading" starts a waiting loop that checks via "isScriptLoading" whether ther are all scripts
* completly loaded or not. If not it waits until all scripts ar loaded.
*/
function initSite() {
importJS('modules/tools/table.js');
waitWhileLoading();
}

function waitWhileLoading() {
if (isScriptLoading() == true) {
setTimeout(waitWhileLoading, 50);
}
else {
// calling the method "startApplication" using a timeout. The timeout is needed because the inheritations
// have to be created in the background and this has to be finished before the program starts.
setTimeout(startApplication, 250);
}
}

function startApplication() {

// Line 34 instatiates the table.<br>
// - The first parameter is the id of th DOM-Element to place thge table into.<br>
// - The second parameter is an array of the column names.
var tabelle = new datatable('tabelle', spalten);

// With the method drawTable the table will be "filled" with data.<br>
// The parameter has to be a numeric array of "hashtables" i.e. an associative array.<br>
// Every hashtable represents one row in the table (if you display database data it would be one record).
// The keys of the hashtable have correspond with the column names of the table. If the astbale contains keys that
// do not correspond to a column name will be invisible. The values will be shown in the table cells.
tabelle.drawTable(daten);
}
</script>
</head>

<body onload='initSite()'>

<h2>A Demonstration of a very simple CoreTable, Variant 1, not cached, not editable.</h2>
<div id='tabelle'></div>

</body>
</html>

A Demonstration of a very simple CoreTable, Variant 1, not cached, not editable.

Source Code of this Website: