See the effects of different CacheTable settings

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

Table settings "DataSource" settings
Listcount Mode Progressive load needs async mode
ProgressiveLoad BlockSize set to 0 to switch off Latency ms
CacheSize records Time per record ms
Table state
Activity
Cash State

Source Code of this Website:

Look for more code-explanation in the previous demos

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>

Syntax highlighting done by GeShi
Powered by GeSHi