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.

This module has been deprecated and is no longer supported by the module author.

DataTable Footer Plugin (gallery-datatable-footer) on cdn

Last Updated: 01/29/13

Todd Smith

YUI Contributor

See 13 more by this user.

Created: 12/7/11
Last CDN Push: 01/11/12
Build Tag: gallery-2012.01.11-21-03
Project: YUI 3
License: YUI BSD
YUI Version: 3.8.1
Free for use.

NOTE: This plugin was designed for 3.4.1, a newer version for 3.6.0 is http://yuilibrary.com/gallery/show/datatable-footerview !!

This plugin can be used with DataTable to add a simple summary TFOOT and TR row to include summary totals based upon the RecordSet.

The single-row TFOOT is basic, with one TH element (as the heading cell for the row) and which can include markup substitution (via Y.substitute) to add RecordSet data. Additionally, the Plugin allows for any Column to have TD cells included with calculated values such as; SUM, AVG, MIN, MAX, ROW_COUNT, COL_COUNT and a few others. It uses Y.substitute to replace items within the footer.

The plugin is easily configured, and is compatible with the Scrolling plugin to allow for either a FIXED (i.e. non-scrolling) or FLOATING footer.

NOTE: This plugin was originally designed for the 3.4 version of DataTable. It WILL NOT WORK with DataTable greater than 3.4.1. Please see DataTable-FooterView if using version 3.6 or greater.

Download
Docs
Homepage
Bugs
Source
Example
Forum
History

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.01.11-21-03'
}).use("datatable-scroll", "dataschema", "datatype", "gallery-datatable-footer", function(Y) {
     var fmtTotal = function(o) {
		return Y.DataType.Number.format( o.value, {prefix:"$ ", thousandsSeparator:",", decimalPlaces:2} );
	}
 
     var jsCustomers = [ 
		{ cust_id:1, cust_name:"George Simon", location:"New York", status:1, no_orders:3, ord_total:8546.8 },
		{ cust_id:2, cust_name:"Angela Marconi", location:"Florence, Italy", status:1, no_orders:1, ord_total:8733.04 },
		{ cust_id:3, cust_name:"Nancy Keeler", location:"Chicago", status:2, no_orders:2, ord_total:1784.32 },
		{ cust_id:4, cust_name:"Mickey Gates", location:"Seattle", status:1, no_orders:7, ord_total:7209.31 },
		{ cust_id:5, cust_name:"Wuchan Hsu", location:"Beijing", status:3, no_orders:0, ord_total:0 },
		{ cust_id:6, cust_name:"Dmitri Zaganuv", location:"Russia", status:2, no_orders:1, ord_total:907.10 } 
	];
 
    var cols = [ 
		{ key:"cust_id", label:"Cust ID" }, 
		{ key:"cust_name", label:"Customer" },
		{ key:"location", label:"Location" },
		{ key:"no_orders", label:"No. Orders" },
		{ key:"ord_total", label:"Order Total", formatter:fmtTotal } 
	 ];
 
    var dt = new Y.DataTable.Base( { 
            columnset: cols,
	    recordset: jsCustomers
	}).plug( Y.Plugin.DataTableScroll, { height:'7.2em' } );
 
    dt.plug( Y.Plugin.DataTableFooter, {
          fixed : true,
          heading : { colspan : 3,  label:"TOTALS ( {ROW_COUNT} Customers) :", className:"align-right" },
          col_keys : [
              { key:"no_orders",  calc:"{SUM}" },
              { key:"ord_total",  calc:"{SUM}"}
         ]
     } );
 
	dt.render("#dtable");
});

YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2012.01.11-21-03'
}).use("datatable-scroll", "dataschema", "datatype", "gallery-datatable-footer", function(Y) {
     var fmtTotal = function(o) {
		return Y.DataType.Number.format( o.value, {prefix:"$ ", thousandsSeparator:",", decimalPlaces:2} );
	}
		 
     var jsCustomers = [ 
		{ cust_id:1, cust_name:"George Simon", location:"New York", status:1, no_orders:3, ord_total:8546.8 },
		{ cust_id:2, cust_name:"Angela Marconi", location:"Florence, Italy", status:1, no_orders:1, ord_total:8733.04 },
		{ cust_id:3, cust_name:"Nancy Keeler", location:"Chicago", status:2, no_orders:2, ord_total:1784.32 },
		{ cust_id:4, cust_name:"Mickey Gates", location:"Seattle", status:1, no_orders:7, ord_total:7209.31 },
		{ cust_id:5, cust_name:"Wuchan Hsu", location:"Beijing", status:3, no_orders:0, ord_total:0 },
		{ cust_id:6, cust_name:"Dmitri Zaganuv", location:"Russia", status:2, no_orders:1, ord_total:907.10 } 
	];
			  	
    var cols = [ 
		{ key:"cust_id", label:"Cust ID" }, 
		{ key:"cust_name", label:"Customer" },
		{ key:"location", label:"Location" },
		{ key:"no_orders", label:"No. Orders" },
		{ key:"ord_total", label:"Order Total", formatter:fmtTotal } 
	 ];

var dt = new Y.DataTable.Base( { 
            columnset: cols,
	    recordset: jsCustomers
	}).plug( Y.Plugin.DataTableScroll, { height:'7.2em' } );

dt.plug( Y.Plugin.DataTableFooter, {
          fixed : true,
          heading : { colspan : 3,  label:"TOTALS ( {ROW_COUNT} Customers) :", className:"align-right" },
          col_keys : [
              { key:"no_orders",  calc:"{SUM}" },
              { key:"ord_total",  calc:"{SUM}"}
         ]
     } );

dt.render("#dtable");
});