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.

Simple Datatable Sort Plugin (gallery-plugin-simple-datatable-sort) on cdn

Last Updated: 10/16/12

+ 0 -

Anthony Pipkin

YUI Developer

See 28 more by this user.

Created: 08/18/10
Last CDN Push: 03/11/11
Build Tag: gallery-2011.03.11-23-49
Project: YUI 3
License: YUI BSD
YUI Version: 3.7.3
Free for use.

 

 Moving to 'gallery-xarno-plugin-datatable-sort' and Y.Xarno.Plugin.DTSort

Built to add functionality to [http://yuilibrary.com/gallery/show/simple-datatable Simple Data Table].

Plugin allows sorting of Simple Datatable by clicking the column headers.

Column settings of sortable="true|false" allows custom controls over which columns are sortable. All columns in the table are sortable by default after plugged.

Column setting of defDirection="asc|desc" allows custom control over which direction a column is sorted when first clicked. All columns are sorted ascending by default after plugged.

Configuration

ascClass - (yui3-icon-control-s) Ability to customize the class used when sorted ASC
descClass - (yui3-icon-control-n) Ability to customize the class used when sorted DESC
key - Key representing the current column sorted
direction - String representing the direction the column selected is sorted

In this example we create a table with two columns. The first column is Labeled with "Id" and set to be descending on first click. The second has a Label of "Title". After we add in the rows, we plug in the SDTSort plugin.

Code Sample

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

YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2011.03.11-23-49'
}).use('gallery-simple-datatable', 'gallery-plugin-simple-datatable-sort',  function(Y){
        var grid = new Y.SimpleDatatable();
        grid.set('headers',{id:{label:'Id', defDirection:'desc'}, title:'Title'});
        grid.set('rows',[
            {id:1,title:'Banana',__fileId:9},
            {id:2,title:'Orange'},
            {id:3,title:'Cherry'},
            {id:4,title:'Grape Fruit'},
            {id:5,title:'Watermelon'}
        ])
        grid.plug(Y.Plugin.SDTSort);
        grid.render();
 
      });

Forum Posts

Subject	Author	Date
how to Infinite Scrolling DataTable using yui3.3.0	SumRain	07/1/11
SimpleDatatableResize plugin does NOT work	mchiocca	07/7/11
Re: SimpleDatatableResize plugin does NOT work	mchiocca	07/10/11
Standardizing apipkin Modules	Anthony Pipkin	10/16/12