Demonstration of a ChacheTable

The intention of the CacheTable is to have a control able to handle large ammonts of records. It is designed to only need these records that are actually in the visible area of the table. So you dont have to first oad a huge ammont of data (and get long delays). The CacheTable works together with a so called dataProvider. The CacheTable then always asks the dataProvider for the data it actually requires. The dataProvider is an object, that has to offer 2 methods: getData und getIdList.

Both methods must take the two arguments from and count. Assuming you defined that one "page" of the CacheTable should have 30 rows (i.e. the listCount is 30), at the beginning the CacheTable will ask the dataProvider for records 0 - 29,calling "getData(0, 30)". The dataProvider has to return the 30 first records. If you scroll down to say position 250 and the CacheTable recognizes that only the records 0 - 260 are already loaded it will call the dataProvider again "getData(260, 20)".

In this example the dataProvider just creates recordsets if it`s getData method is called by the table. In a productional environment the getData method will perform a database-query or read a file.

So to use a CoreTable you have to
  • Implement a dataProvider
  • Instatiate the dataProvider and pass the instance to the table in the constructor.

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 = ['id', 'fullname', 'birthday', 'income'];
var spaltenTitel = {'id':'Nr.', 'fullname':'Vollständiger Name', 'birthday':'Geburtsdatum', 'income':'Salär'};
var spaltenBreiten = {'id':50, 'fullname':250, 'birthday':100, 'income':100};

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);      // Damit alle Vererbungen vor dem eigentlichen Start noch angelegt werden.. IE
        }
}

function startApplication() {
        var rederer = new cellRenderer();
       
        //  Instantiate the dataProvider       
        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);
       
        //  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.setRenderer('fullname', rederer);
        tabelle.setRenderer('birthday', rederer);
        tabelle.setRenderer('income', rederer);

        tabelle.setColumnFormat('income', "align='right'");
        tabelle.setAlternation([{'style':'background-color: #ffffdd;'}, {'style':'background-color: white;'}]);

        var matchCount = 9999;
       
        //  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(matchCount);
}

/**
*       An Example of a dataProvider
*/
function dataProvider() {

        this.getData = getData;
        this.getIdList = getIdList;

        /**
        *       return an array containing count records (i.e. hashtables)
        */
        function getData(from, count) {
                var data = [];
                for (var n = from; n < from + count; n++) {
                        var record = {};
                        record['id'] = n*2+1;
                        record['name'] = "Name "+ n;
                        record['firstname'] = "Firstname "+n;
                        record['birthday'] = "19"+((n % 90)+10)+"-03-03";
                        record['income'] = n*40 + 40000;
                        data[data.length] = record;
                }

                return data;
        }

        /**
        *       return an array containing count ids
        */
        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 a ChacheTable</h2>

<div id='tabelle'></div>
<p>
        The intention of the CacheTable is to have a control able to handle large ammonts of records. It is designed to
        only need these records that are actually in the visible area of the table. So you dont have to first oad a huge
        ammont of data (and get long delays). The CacheTable works together with a so called dataProvider.
        The CacheTable then always asks the dataProvider for the data it actually requires. The dataProvider is an
        object, that has to offer 2 methods: getData und getIdList.
</p><p>
        Both methods must take the two arguments from and count.
        Assuming you defined that one "page" of the CacheTable should have 30 rows (i.e. the listCount  is 30), at the beginning
        the CacheTable will ask the dataProvider for records 0 - 29,calling "getData(0, 30)". The dataProvider has to return
        the 30 first records.
        If you scroll down to say position 250 and the CacheTable recognizes that only the records 0 - 260 are already loaded it will
        call the dataProvider again "getData(260, 20)".
</p><p>
        In this example the dataProvider just creates recordsets if it`s getData method is called by the table. In a
        productional environment the getData method will perform a database-query or read a file.
</p>
<b>So to use a CoreTable you have to</b>
<ul>
        <li>Implement a dataProvider</li>
        <li>Instatiate the dataProvider and pass the instance to the table in the constructor.</li>
</ul>
</body>
</html>

Syntax highlighting done by GeShi
Powered by GeSHi