quick edit with pagination

Quick Edit

by Hollie Szadowski

HTML

<div id="toc" class="yui3-skin-sam">
    
    
<hr>

<div id="controls">
	<button id="start">QuickEdit</button>
	<button id="save" style="display:none;">Save</button>
	<button id="cancel" style="display:none;">Cancel</button>
</div>

<div id="pg"></div>

<div id="table"></div>

CSS

<style>
.yui3-datatable-table{
    empty-cells:show
}
.yui3-skin-sam .yui3-datatable-table{
    margin:0;
    padding:0;
    font-family:arial,sans-serif;
    border-collapse:separate;
    border-spacing:0;
    border:1px solid #cbcbcb
}
.yui3-skin-sam .yui3-datatable-caption{
    color:#000;
    font:italic 85%/1 arial,sans-serif;
    padding:1em 0;
    text-align:center
}
.yui3-skin-sam .yui3-datatable-cell,.yui3-skin-sam .yui3-datatable-header{
    border-left:1px solid #cbcbcb;
    border-width:0 0 0 1px;
    font-size:inherit;
    margin:0;
    overflow:visible;
    padding:4px 10px 4px 10px
}
.yui3-skin-sam .yui3-datatable-cell:first-child,.yui3-skin-sam .yui3-datatable-first-header{border-left-width:0}.yui3-skin-sam .yui3-datatable-header{background:#fff url(http://yui.yahooapis.com/3.6.0/build/assets/skins/sam/sprite.png) repeat-x 0 0;background-image:-webkit-linear-gradient(transparent 40%,rgba(0,0,0,0.21));background-image:-moz-linear-gradient(top,transparent 40%,rgba(0,0,0,0.21));background-image:-ms-linear-gradient(transparent 40%,rgba(0,0,0,0.21));background-image:-o-linear-gradient(transparent 40%,rgba(0,0,0,0.21));background-image:linear-gradient(transparent 40%,rgba(0,0,0,0.21));color:#000;font-weight:normal;text-align:left;text-shadow:0 1px 1px #fff;vertical-align:bottom;white-space:nowrap}.yui3-skin-sam .yui3-datatable-cell{background-color:transparent}.yui3-skin-sam .yui3-datatable-even .yui3-datatable-cell{background-color:#fff}.yui3-skin-sam .yui3-datatable-odd .yui3-datatable-cell{background-color:#edf5ff}#yui3-css-stamp.skin-sam-datatable-base{display:none}

</style>

JavaScript

YUI({
//	filter: 'raw', combine: false,
	gallery: 'gallery-2013.06.26-23-09'
}).use(
	'datatable-datasource',
	'gallery-quickedit',
	'gallery-paginator',
function(Y) {
"use strict";

	function sendRequest()
	{
		table.datasource.load(
		{
			request: pg.getState()
		});
	}

// Raw data

	var data =
	[
		{id:'n1', year:1950, quantity:10, title:"The Lion, the Witch and the Wardrobe"},
		{id:'n2', year:1951, quantity:5, title:"Prince Caspian: The Return to Narnia"},
		{id:'n3', year:1952, quantity:2, title:"The Voyage of the Dawn Treader"},
		{id:'n4', year:1953, quantity:6, title:"The Silver Chair"},
		{id:'n5', year:1954, quantity:9, title:"The Horse and His Boy"},
		{id:'n6', year:1955, quantity:4, title:"The Magician's Nephew"},
		{id:'n7', year:1956, quantity:8, title:"The Last Battle"},
		{id:'lsf1', year:1938, quantity:10, title:"Out of the Silent Planet"},
		{id:'lsf2', year:1943, quantity:5, title:"Perelandra"},
		{id:'lsf3', year:1945, quantity:2, title:"That Hideous Strength"},
		{id:'p1', year:1995, quantity:7, title:"Northern Lights"},
		{id:'p2', year:1997, quantity:5, title:"The Subtle Knife"},
		{id:'p3', year:2000, quantity:8, title:"The Amber Spyglass"},
		{id:'t0', year:1937, quantity:5, title:"The Hobbit"},
		{id:'t1', year:1955, quantity:12, title:"The Fellowship of the Ring"},
		{id:'t2', year:1955, quantity:0, title:"The Two Towers"},
		{id:'t3', year:1955, quantity:8, title:"The Return of the King"},
		{id:'pd', year:1966, quantity:5, title:"Do Androids Dream of Electric Sheep?"},
		{id:'h1', year:1959, quantity:4, title:"Starship Troopers"},
		{id:'h2', year:1961, quantity:7, title:"Stranger in a Strange Land"},
		{id:'h3', year:1966, quantity:3, title:"The Moon Is a Harsh Mistress"},
		{id:'v1', year:1946, quantity:3, title:"Slan"},
		{id:'v2', year:1950, quantity:5, title:"The Voyage of the Space Beagle"},
		{id:'v3', year:1970, quantity:8, title:"Quest for the Future"},
		{id:'d1', year:1859, quantity:5, title:"On the Origin of Species by...