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 Checkbox Selection (gallery-datatable-checkbox-select) on cdn

Last Updated: 01/31/13

+ 2 -

Todd Smith

YUI Contributor

See 13 more by this user.

Created: 09/11/12
Last CDN Push: 09/12/12
Build Tag: gallery-2012.09.12-20-02
Project: YUI 3
License: YUI BSD
YUI Version: 3.8.1
Free for use.

This is a class extension to DataTable that adds capability to easily add a "checkbox" type record selection that maintains "selected state" after table sorting, pagination or other actions.

What it Does

It handles creating a new column that holds the checkboxes, with a TH heading that allows "select all" and sets up all of the click handlers to listen to changes. Selected records are maintained internally in an array which is added to or removed from based on "checkbox" status.

Checkbox selection can be turned on or off setting the attribute checkboxSelectMode to true or false.

Getting Results

Selected rows can be retrieved by simply getting the attribute checkboxSelected which returns an array of objects containing members {tr,record,pkvalues}. (Please see the examples)

Primary Keys

This extension requires the user to define "primary keys" (as in database parlance) for their DataTable. The primary key (either a single or multiple keys) is used to uniquely define an individual record. Within this extension this is achieved by either;

adding a property primaryKey to the column configuration for the desired key column
or by setting the new DataTable attribute primaryKeys (added by this extension) to the key name(s).

(See the code sample below or the demos)

A demo working example of this checkbox utility working with Gallery-DataTable-Paginator and for "paginated" local data is at dt_checkbox_select_pag.html

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.09.12-20-02'
}).use('datatable-sort','datatable-scroll','gallery-datatable-checkbox-select', function(Y) {
 
    var dtable = new Y.DataTable({
        columns :  [ 'port', 'pname', 'ptitle' ],
        data:      ports,
        scrollable: 'y',
        height:     '250px',
        sortable:   true,
        sortBy:     ['pname'],
 
    // Set configuration for two primary keys and enable checkbox selection ...
        primaryKeys:    [ 'port', 'pname' ],
        checkboxSelectMode: true
 
    }).render("#dtable");
 
// after user has selected some rows, get them and do something with them ...
 
   var selRows = dtable.get('checkboxSelected');
   // returns array of objects {tr,record,pkvalues} 
 
 
});