Demonstration of a table using a renderer to show nicely formatted data

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>

//  Define the column to show, their captions and widths.
var spalten = ['fullname', 'birthday', 'income'];
var spaltenTitel = {'fullname':'Full Name', 'birthday':'Date of birth', 'income':'Salery'};
var spaltenBreiten = {'fullname':250, 'birthday':100, 'income':100};

//  Define the data to show in the table. This time the keys do not correspond to the column-name.
//  The renderer will correct this, it will show the fields "name" followed be "firstname" in the column "fullname"
var daten = [];
daten[0] = {'name':'Müller', 'firstname':'Marius', 'birthday':'1946-04-24.', 'income':87400};
daten[1] = {'name':'Maier',  'firstname':'Andrea', 'birthday':'1982-06-12', 'income':102300};
daten[2] = {'name':'Huber', 'firstname':'Sybille', 'birthday':'1988-08-14', 'income':96740};
daten[3] = {'name':'Gerber', 'firstname':'Robert', 'birthday':'1952-11-04', 'income':65800};
daten[4] = {'name':'Hagmann', 'firstname':'Lisa', 'birthday':'1966-01-09', 'income':85400};

/**
*       Define the "Class" that should act as renderer. It has to provide a method "translateValue(col, record)"
*       The table will call this method an pass the data-values passed to table,expecting to get the data to display in the table-cell.
*       A renderer may be used to roemat data-values before displaying them ('birthday' and 'income') or to
*       display a combination of to data-values in one table cell.
*/

function cellRenderer() {

        this.translateValue = translateValue;

        function translateValue(col, record) {
                var cellContent = "";
                switch (col) {
                        case 'fullname':

                                // generate the content to display in the column "fullname", "name" followed by "firstname"
                                cellContent = record['name']+", "+record['firstname']
                                break;
                        case 'birthday':

                                //  format the SQL-Formatted date strint (YYYY-MM-DD) int an euopean style formatted date (MM.DD.YYYY).
                                //  "std" is global available since the file "stdfuncs.js" is included.
                                cellContent = std.sqlDate2euroDate(record[col])
                                break;
                        case 'income':
                                //  formats the income to get a readable cell-content,e.g. 46599 will become 46'599;
                                cellContent = std.number_format(record[col], 0, ".", "'");
                                break;
                }

                return cellContent;
        }

}

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

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

function startApplication() {
        //  Instatiate the renderer object, on order to pass it to the table using the table's "setRenderer" function.
        //  Afterwards the table will always call the renderer istead of displaying ndirectly the data when it has to display a cell of
        //  the given columns. In this example all columns will be displayed using the renderer, but it's also possible to set
        //  a rederer for some columns and for some others not. Even different renderers for different columns are possible.
        var rederer = new cellRenderer();
        var tabelle = new datatable('tabelle', spalten, spaltenTitel, spaltenBreiten);

        //  Telling the table to use the renderer to display the specified columns.
        tabelle.setRenderer('fullname', rederer);
        tabelle.setRenderer('birthday', rederer);
        tabelle.setRenderer('income', rederer);

        //  Telling the table to display the income right-aligned
        tabelle.setColumnFormat('income', "align='right'");
       
        //  Tells the table to use alternating background colors. Theoretically any HTML-Attributes may be passed, typically
        //  style and/or class will be used to do this. Note that an array of hashtables is passed to table.
        tabelle.setAlternation([{'style':'background-color: #ffffdd;'}, {'style':'background-color: white;'}]);

        tabelle.drawTable(daten);
}
</script>
</head>

<body onload='initSite()'>

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

<h2>Demonstration of a table using a renderer to show nicely formatted data</h2>
<div id='tabelle'></div>

</body>
</html>

Syntax highlighting done by GeShi
Powered by GeSHi