CoreTable - Demo

To improove the handling of the scrollbar you may write an async dataProvider. In this case write getData(from, count) so that it returns false instead of the requested data. Before returning false, you may start an AJAX-Call or however you reach your needed data. If later on you get the data u pass the records to the table via setData().

In this case you have to implement your dataProvider so that it has access to th cacheTable Object.

In this example a (Database-) response time of 40ms + 5ms per requested record is simulated.

The progressive-load mechanism (by default on) is switched off in this example to show better how the loading and inseriting of the data works. ProgressiveLoad means that alwa after the table has got displayd all data for the visible part, it starts to preload the next records in the background.

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/cachetable.js');
waitWhileLoading();
}

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

function startApplication() {
var 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
var 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());
}

/**
* 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.cacheTable;

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;
}

/**
* 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) {
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(40 + (5 * count), this, 'dataLoaded', this.aSyncCallId);
this.aSyncCallId++;
return false;
}

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.cacheTable.setData(this.startPos[aSyncCallId], requestedData);
}

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

</script>
</head>

<body onload='initSite()'>

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

<h2>Demonstration of an asynchronous working CacheTable</h2>

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

<p>
To improove the handling of the scrollbar you may write an async dataProvider.
In this case write getData(from, count) so that it returns <b>false</b> instead of the requested data.
Before returning false, you may start an AJAX-Call or however you reach your needed data.
If later on you get the data u pass the records to the table via setData().
</p><p>
In this case you have to implement your dataProvider so that it has access to th cacheTable Object.
</p><p>
In this example a (Database-) response time of 40ms + 5ms per requested record is simulated.
</p><p>
The progressive-load mechanism (by default on) is switched off in this example to show better how
the loading and inseriting of the data works. ProgressiveLoad means that alwa after the table has got
displayd all data for the visible part, it starts to preload the next records in the background.
</p>
</body>
</html>