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 column captions
var spaltenTitel = {'name':'Name', 'firstname':'First Name', 'birthday':'Date of birth'};

// define the column widths
var spaltenBreiten = {'name':250, 'firstname':250, 'birthday':100};

// define the testdata to show in the table. the key of the record-hashtables have to correspond with
// the column names, not the column captions
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'};

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

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

function startApplication() {

// instantiate the table
// - Parameter 1 is the id of the DOM-Element to place the table into
// - Parameter 2 is an arry of the columns to show in the table, this defines the column order.
// - Parameter 3 is the hashtbale defining the column captions, key: column-name, value: column-caption
// - Parameter 4 is the hashtable defining the column-width, key: column-name, value: column-caption
// Parameter 3 and 4 are optional.
var tabelle = new datatable('tabelle', spalten, spaltenTitel, spaltenBreiten);
tabelle.drawTable(daten);
}
</script>
</head>

<body onload='initSite()'>

<h2>A demonstration of a simple CoreTable using custom column-titles and column-widths</h2>
<div id='tabelle'></div>

</body>
</html>

A demonstration of a simple CoreTable using custom column-titles and column-widths

Source Code of this Website: