CoreTable - Demo

This example demonstrates the effects and depandencies of the settings shown on top.
Play arond with them to learn more.

Source Code of this Website:

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>

var spalten = ['type', 'title', 'name', 'first_name'];
var spaltenTitel = {'type':'Type', 'title':'Title', 'name':'Name', 'first_name':'Vorname'};
var spaltenBreiten = {'type':100, 'title':70, 'name':150, 'first_name':150};

function cellRenderer() {

this.translateValue = translateValue;

function translateValue(col, record) {
var cellContent = "";
switch (col) {
case 'fullname':
cellContent = record['name']+", "+record['firstname']
break;
case 'birthday':
cellContent = std.sqlDate2euroDate(record[col])
break;
case 'income':
cellContent = std.number_format(record[col], 0, ".", "'");
break;
}

return cellContent;
}

}

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

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

var dp;
var cacheTable;

var configForm;

function startApplication() {
configForm = new form('config_form');
configForm.addSelector('mode', {'sync':'sync', 'async':'async'});
configForm.addNumberInput('plb_size');
configForm.addNumberInput('list_count');
configForm.addNumberInput('cache_size');
configForm.addNumberInput('latency');
configForm.addNumberInput('time_per_record');

defaults = {'mode':'async', 'plb_size':0, 'list_count':30, 'cache_size':4096, 'latency':40, 'time_per_record':5}
configForm.setValues(defaults);

dp = new dataProvider();

// Define how many rows to be on one "page"
var listCount = 30;

// Instantiating the CacheTable
// - 1. Parameter defines where to place the table (id or DOM-Element)
// - 2. Parameter is the dataProvider
// - 3. Parameter is the the number of rows to show
// - 4. Parameter the columns (as the 2. Argument of the "normal" table
cacheTable = new cachetable('tabelle', dp, listCount, spalten);

// pass a reference of the cacheTable to the dataProvider.
dp.setCacheTable(cacheTable);

// The cacheTable internally uses a normal table to display the data
// you may retreive this object using cacheTable.getTable()
// use the internal table to set colWidths, alternation's renderers, editors etc...
var tabelle = cacheTable.getTable();
tabelle.setColTitles(spaltenTitel);
tabelle.setColWidth(spaltenBreiten);
tabelle.setAlternation([{'style':'background-color: #ffffdd;'}, {'style':'background-color: white;'}]);

// switch off the progressive-load mechanism
cacheTable.setPLBlockSize(0);

// Tell the table how many records you have totally
// This call "replaces" the drawTable calls if you use the normal tables.
// after this call the cachtable starts to ask data from the dataProvider and starts to draw itself.
cacheTable.dataChanged(dp.getMatchCount());
}

function updateSettings() {
var settings = configForm.getValues();

dp.setMode(settings['mode']);
dp.setSpeed(settings['latency'], settings['time_per_record']);

cacheTable.setListCount(settings['list_count']);
cacheTable.setCacheSize(settings['cache_size']);
cacheTable.setPLBlockSize(settings['plb_size']);

cacheTable.dataChanged(dp.getMatchCount());
}

/**
* An Example of a dataProvider
* This dataProvider reads the "testdata.dat" file
*/
function dataProvider() {

this.getData = getData;
this.getIdList = getIdList;
this.loadData = loadData;
this.dataLoaded = dataLoaded;
this.setCacheTable = setCacheTable;
this.getMatchCount = getMatchCount;

this.setMode = setMode;
this.setSpeed = setSpeed;

this.updateCacheState = updateCacheState;
this.updateActivity = updateActivity;

this.cacheTable;

this.mode = "async";
this.latency = 40;
this.time_per_record = 5;

this.rowSep = "\n";
this.colSep = "\t";
this.colIndices = {'type':0, 'title':1, 'name':2, 'first_name':3}

this.data = [];

this.aSyncCallId = 0;
this.startPos = {};
this.reuestedCount = {};

this.loadData();

// Loading the data from the file
function loadData() {
this.data = [];

var fileContent = syncGetFile('testdata.dat');
var rows = fileContent.split(this.rowSep);
for (var n = 0; n < rows.length; n++) {
var record = {};
var rawRecord = rows[n].split(this.colSep);
for (col in this.colIndices) {
record[col] = rawRecord[this.colIndices[col]];
}
this.data[this.data.length] = record;
}
}

// storing the rerence of the cachetable
function setCacheTable(ct) {
this.cacheTable = ct;
}

function setSpeed(latency, time_per_record) {
this.latency = latency;
this.time_per_record = time_per_record;
}

function setMode(mode) {
this.mode = mode;
}

/**
* Start data retreival, this may be an asynchronous AJAX-Call or wharever
* return false to indicate th table that the date is loading asynchonously.
*/
function getData(from, count) {
var time = parseInt(this.latency) + (this.time_per_record * count);

var retVal = false;
if (this.mode == "sync") {
this.updateActivity(true);

var start = new Date().getTime();

var retVal = [];
for (var n = from; n < from + count; n++) {
retVal[retVal.length] = this.data[n];
}

var now = start;
while (now - start < time) {
now = new Date().getTime();
}
this.updateCacheState();
this.updateActivity(false);
}
else {
this.updateActivity(true);
this.updateCacheState();
this.startPos[this.aSyncCallId] = from;
this.reuestedCount[this.aSyncCallId] = count;

// This is done to simulate a resoponse tim of e.g. a database server or a webservice.
timer.setTimer(time, this, 'dataLoaded', this.aSyncCallId);
this.aSyncCallId++;
}
return retVal;
}

function getMatchCount() {
return this.data.length;
}

/**
* Called when the requested data is loaded and available.
*/
function dataLoaded(aSyncCallId) {
var requestedData = [];
for (var n = this.startPos[aSyncCallId]; n < this.startPos[aSyncCallId] + this.reuestedCount[aSyncCallId]; n++) {
requestedData[requestedData.length] = this.data[n];
}

// pass the loaded data to the table.
this.updateActivity(false)
this.cacheTable.setData(this.startPos[aSyncCallId], requestedData);
this.updateCacheState();
}

function getIdList(from, count) {
var idList = [];
for (var n = from; n < from + count; n++) {
idList[idList.length] = n*2+1;
}
return idList;
}

function updateActivity(loading) {
if (loading == true) {
document.getElementById('activity').style.visibility = "visible";
}
else {
document.getElementById('activity').style.visibility = "hidden";
}
}

function updateCacheState() {
var cacheSize = this.cacheTable.getCacheSize();
var occupancy = this.cacheTable.getCacheOccupancy();

var percent = 0;
if (cacheSize > 0) percent = Math.round(occupancy / cacheSize * 100)

document.getElementById('cache_state').innerHTML = occupancy+" of "+cacheSize+" used ("+percent+"%)";
}
}

</script>
</head>

<body onload='initSite()'>

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

<h2>See the effects of different CacheTable settings</h2>
<p>
This example demonstrates the effects and depandencies of the settings shown on top.<br>
Play arond with them to learn more.
</p>

<table id='config_form' class='config_table'><tr>
<th colspan='3'>Table settings</th>
<th colspan='3'>"DataSource" settings</th>
</tr><tr>
<td>Listcount</td>
<td align='right' id='list_count'></td>
<td></td>
<td>Mode</td>
<td align='right' id='mode'></td>
<td>Progressive load needs async mode</td>
</tr><tr>
<td>ProgressiveLoad BlockSize</td>
<td align='right' id='plb_size'></td>
<td>set to 0 to switch off</td>
<td>Latency</td>
<td align='right' id='latency'></td>
<td>ms</td>
</tr><tr>
<td>CacheSize</td>
<td align='right' id='cache_size'></td>
<td>records</td>
<td>Time per record</td>
<td align='right' id='time_per_record'></td>
<td>ms</td>
</tr></table>
<button onclick='updateSettings();'>Update Settings</button>

<table class='config_table'><tr>
<th colspan='2'>Table state</td>
</tr><tr>
<td>Activity</td>
<td id='activity' align='center' style='background-color:green; visibility:hidden'>Loading...</td>
</tr><tr>
<td>Cash State</td>
<td id='cache_state'></td>
</tr></table>

<div id='tabelle'></div>

</body>
</html>