Gallery

Modules

Documentation

Context Navigation

YUI Library is not responsible for bugs or support with this module. It is available as a free service. For support please contact the module owner with the provided links.

DataTable Footer View (gallery-datatable-footerview) on cdn

Last Updated: 02/7/13

+ 0 -

Todd Smith

YUI Contributor

See 13 more by this user.

Created: 08/14/12
Last CDN Push: 08/22/12
Build Tag: gallery-2012.08.22-20-00
Project: YUI 3
License: YUI BSD
YUI Version: 3.8.1
Free for use.

FooterView is a View class extension that works with the YUI 3.6.0 DataTable to provide a summary row in the TFOOT of a DataTable. The footer works with both scrolling and non-scrolling DataTable and can be configured to be either "floating" (i.e. along with scrolling) or "fixed" (i.e. stationary at bottom during scrolling).

Changes to DT as of 3.6.0 include allowing custom Y.View classes to be defined for the DataTable "header", "body" and "footer". The current version of DT core includes standard Views defined for the headerView and the bodyView, but not for a footerView. This FooterView is targeted as an example of one.

The FooterView recalculates the values as changes are made to the underlying "dataset" for the DT due to adds, deletes, changes or a resetting of the data.

Replaceable "calculated fields" in the footer include {sum}, {min}, {max}, {avg}, {date}, {time}, {row_count} and {col_count}.

The configuration for this FooterView is entered as a DataTable configuration parameter "footerConfig".

Please see the Example below and the Docs pages for more information.

A working demo where you can change the footer configuration on-the-fly via a Dialog is provided at http://stlsmiths.github.com/blunderalong/dt_footerview_demo.html

NOTE: Because of the many changes to DataTable, this current View only works with YUI 3.6.0+
(This extension is based upon an earlier plugin version for YUI 3.4.1 at DataTable Footer Plugin)

Code Sample

<script src="http://yui.yahooapis.com/3.8.1/build/yui/yui-min.js"></script>

YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2012.08.22-20-00'
}).use( 'datatable', 'gallery-datatable-footerview', function(Y) {
 
    // AccountMgr.Sales Javascript array not shown ...
 
    var dtable = new Y.DataTable({
        columns:    ["EmpID","EmpName","Dept","NumClients","SalesTTM"],
        data:        AccountMgr.Sales,
        scrollable: 'y',
        height:     '150px',
        width:      '400px',
 
        footerView:   Y.FooterView,  //NOTE: don't use "new" here
        footerConfig: {
            fixed:   true,
            heading: {
                colspan:    3,
                content:    "Totals for {row_count} Records :  ",
                className:  "align-right"
            },
            columns: [
                { key:'NumClients', content:"{avg} avg",  className:"clientsClass",
                    formatter:fmtComma2 },
                { key:'SalesTTM',   content:"{sum}", className:"salesClass" }
            ]
        }
    });
 
    dtable.render('#divHere');
 
});

YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2012.08.22-20-00'
}).use( 'datatable', 'gallery-datatable-footerview', function(Y) {

// AccountMgr.Sales Javascript array not shown ...

var dtable = new Y.DataTable({
        columns:    ["EmpID","EmpName","Dept","NumClients","SalesTTM"],
        data:        AccountMgr.Sales,
        scrollable: 'y',
        height:     '150px',
        width:      '400px',

footerView:   Y.FooterView,  //NOTE: don't use "new" here
        footerConfig: {
            fixed:   true,
            heading: {
                colspan:    3,
                content:    "Totals for {row_count} Records : Â ",
                className:  "align-right"
            },
            columns: [
                { key:'NumClients', content:"{avg} avg",  className:"clientsClass",
                    formatter:fmtComma2 },
                { key:'SalesTTM',   content:"{sum}", className:"salesClass" }
            ]
        }
    });

dtable.render('#divHere');

});