The Gallery is deprecated. No new Gallery components may be submitted, and modifying existing components is disabled. For more information please read the Gallery Deprecation blog post. This is a static snapshot of the Gallery for archive purposes.
See 28 more by this user. Created: 09/6/10
Last CDN Push: 09/8/10
Build Tag: gallery-2010.09.08-19-45
Project: YUI 3
License: YUI BSD
YUI Version: 3.7.3
Free for use.
Moving to 'gallery-xarno-plugin-datatable-paginate-client'
and Y.Xarno.Plugin.DTPaginate.Client
Built to add functionality to [http://yuilibrary.com/gallery/show/simple-datatable Simple Data Table].
A paginate plugin that handles item paging on the client. All items must be loaded into the datatable for the paginate plugin to page the items.
In this example we start with 4 buttons defined to control the paginate plugin. Then we add 100 rows of id => title rows with arrays. Next we plug in the SDTPaginateClient Plugin for clientside paginating. Lastly we wire up the button to control the pagination. Notice how the buttons talk to the plugin, not the simple datatable directly.
<script src="http://yui.yahooapis.com/3.7.3/build/yui/yui-min.js"></script>
<button id="first">First</button>
<button id="prev">Previous</button>
<button id="next">Next</button>
<button id="last">Last</button>
<div id="grid"></div>
<script type="text/javascript">
YUI({
//Last Gallery Build of this module
gallery: 'gallery-2010.09.08-19-45'
}).use('gallery-simple-datatable', 'gallery-plugin-simple-datatable-paginate-client', function(Y){
var grid = new Y.SimpleDatatable();
grid.set('headers',{id:{label:'Id', resizable:false}, title:'Title'});
grid.set('rows',[
[ 1, 'Banana'], [ 2, 'Carrot'],[ 3, 'Apple'],[ 4, 'Grapes'],[ 5, 'Strawberry'],[ 6, 'Blueberry'],[ 7, 'Raspberry'],[ 8, 'Cranberry'],[ 9, 'Lettuce'],[10, 'Tomato'],
[11, 'Potato'], [12, 'Squash'],[13, 'Zucchini'],[14, 'Eggplant'],[15, 'Caulifowler'],[16, 'Onion'],[17, 'Orange'],[18, 'Grapefruit'],[19, 'Peas'],[20, 'Broccoli'],
[21, 'Corn'], [22, 'Canteloupe'],[23, 'Honeydew'],[24, 'Watermelon'],[25, 'Kiwi'],[26, 'Plum'],[27, 'Peach'],[28, 'Nectarine'],[29, 'Blackberry'],[30, 'Fig'],
[31, 'Turnip'], [32, 'Beet'],[33, 'Aspariagus'],[34, 'Mushroom'],[35, 'Bell Pepper'],[36, 'Banana Pepper'],[37, 'Jalapeno'],[38, 'Black Eyed Peas'],[39, 'Green Bean'],[40, 'Field Peas'],
[41, 'Cherry'], [42, 'Sweet Potato'],[43, 'Cucumber'],[44, 'Tangerine'],[45, 'Pineapple'],[46, 'Starfruit'],[47, 'Passionfruit'],[48, 'Dragonfruit'],[49, 'Pomegranate'],[50, 'Snow Peas'],
[51, 'Sugar Snap Peas'],[52, 'Hominy Corn'],[53, 'Lima Bean'],[54, 'Olive'],[55, 'Muscadine'],[56, 'Scuppernong'],[57, 'Rhubarb'],[58, 'Rhudabega'],[59, 'Yam'],[60, 'Kidney Bean'],
[61, 'Black Bean'], [62, 'Pinto Bean'],[63, 'Romain'],[64, 'Field Greens'],[65, 'Spinach'],[66, 'Collard Greens'],[67, 'Avacado'],[68, 'Plantain'],[69, 'Apricot'],[70, 'Vanilla'],
[71, 'Black Cherry'], [72, 'Kumkwat'],[73, 'Lime'],[74, 'Lemon'],[75, 'Pear'],[76, 'Peanut'],[77, 'Walnut'],[78, 'Peacan'],[79, 'Brazilnut'],[80, 'Mustard Greens'],
[81, 'Cashew'], [82, 'Almond'],[83, 'Pistachio'],[84, 'Macadamia'],[85, 'Raisin'],[86, 'Prune'],[87, 'Pickle'],[88, 'Habenero Pepper'],[89, 'Chili Pepper'],[90, 'Red Apple'],
[91, 'Crabapple'], [92, 'Plum Tomato'],[93, 'Bosc Pear'],[94, 'Fuji Apple'],[95, 'Roma Tomato'],[96, 'Pimento'],[97, 'Granny Smith Apple'],[98, 'Cherry Tomato'],[99, 'Butter Beans']
]);
grid.plug(Y.Plugin.SDTPaginateClient);
grid.render('#grid');
Y.one('#first').on('click', function(e){
grid.paginate.gotoFirstPage();
});
Y.one('#prev').on('click', function(e){
grid.paginate.gotoPrevPage();
});
Y.one('#next').on('click', function(e){
grid.paginate.gotoNextPage();
});
Y.one('#last').on('click', function(e){
grid.paginate.gotoLastPage();
});
});
</script>
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 |
All code on this site is licensed under the BSD License unless stated otherwise.