YUI Library Examples: DataTable Control: Adding and Deleting Rows

DataTable Control: Adding and Deleting Rows

Adding and deleting rows dynamically.

row	one	two	three
No records found.

Sample Code for this Example

Data:

CSS:


1	#buttons {margin-bottom: 1em;}
	view plain \| print \| ?

Markup:


1	<div id="buttons">
2	<span id="addrow" class="yui-button yui-push-button">
3	<span class="first-child">
4	<button type="button">Add one row</button>
5	</span>
6	</span>
7	<span id="deleterow" class="yui-button yui-push-button">
8	<span class="first-child">
9	<button type="button">Delete top row</button>
10	</span>
11	</span>
12	<span id="addrows" class="yui-button yui-push-button">
13	<span class="first-child">
14	<button type="button">Add 20 rows</button>
15	</span>
16	</span>
17	<span id="deleterows" class="yui-button yui-push-button">
18	<span class="first-child">
19	<button type="button" name="button5">Delete top 20 rows</button>
20	</span>
21	</span>
22	</div>
23	<div id="basic"></div>
	view plain \| print \| ?

JavaScript:


1	YAHOO.util.Event.addListener(window, "load", function() {
2	YAHOO.example.DynamicData = new function() {
3	var data = {one:"one",two:"two",three:"three"};
4
5	var myColumnDefs = [
6	{key:"row",resizeable:true,sortable:true},
7	{key:"one",resizeable:true},
8	{key:"two",resizeable:true},
9	{key:"three",resizeable:true}
10	];
11
12	this.myDataSource = new YAHOO.util.DataSource([]);
13	this.myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
14	this.myDataSource.responseSchema = {
15	fields: ["one","two","three"]
16	};
17
18	this.myDataTable = new YAHOO.widget.DataTable("basic",
19	myColumnDefs, this.myDataSource, {});
20
21	var i=1,
22	bReverseSorted = false;
23
24	// Track when Column is reverse-sorted, since new data will come in out of order
25	var trackReverseSorts = function(oArg) {
26	bReverseSorted = (oArg.dir === YAHOO.widget.DataTable.CLASS_DESC);
27	};
28	this.myDataTable.subscribe("columnSortEvent", trackReverseSorts);
29
30	// Add one row to the bottom
31	var btnAddRow = new YAHOO.widget.Button("addrow");
32	btnAddRow.on("click", function() {
33	// Clear sort when necessary
34	if(bReverseSorted) {
35	this.myDataTable.set("sortedBy", null);
36	}
37
38	var record = YAHOO.widget.DataTable._cloneObject(data);
39	record.row = i++;
40	this.myDataTable.addRow(record);
41	},this,true);
42
43	// Add 20 rows to the bottom
44	var btnAddRows = new YAHOO.widget.Button("addrows");
45	btnAddRows.on("click", function(e) {
46	// Clear sort when necessary
47	if(bReverseSorted) {
48	this.myDataTable.set("sortedBy", null);
49	}
50
51	var myArray = [];
52	for(var l=i;i<=l+19;i++) {
53	var record = YAHOO.widget.DataTable._cloneObject(data);
54	record.row = i;
55	myArray.push(record);
56	}
57	this.myDataTable.addRows(myArray);
58	},this,true);
59
60	// Delete one row from the top
61	var btnDeleteRow = new YAHOO.widget.Button("deleterow");
62	btnDeleteRow.on("click", function() {
63	if(this.myDataTable.getRecordSet().getLength() > 0) {
64	this.myDataTable.deleteRow(0);
65	}
66	},this,true);
67
68	// Delete 20 row from the top
69	var btnDeleteRows = new YAHOO.widget.Button("deleterows");
70	btnDeleteRows.on("click", function() {
71	var length = this.myDataTable.getRecordSet().getLength();
72	if(length > 0) {
73	var count = (length > 19) ? 20 : length;
74	this.myDataTable.deleteRows(0,count);
75	}
76	},this,true);
77	};
78	});
	view plain \| print \| ?

YAHOO.util.Event.addListener(window, "load", function() {
    YAHOO.example.DynamicData = new function() {
        var data = {one:"one",two:"two",three:"three"};
        
        var myColumnDefs = [
            {key:"row",resizeable:true,sortable:true},
            {key:"one",resizeable:true},
            {key:"two",resizeable:true},
            {key:"three",resizeable:true}   
        ];

this.myDataSource = new YAHOO.util.DataSource([]);
        this.myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
        this.myDataSource.responseSchema = {
            fields: ["one","two","three"]
        };
        
        this.myDataTable = new YAHOO.widget.DataTable("basic",
                myColumnDefs, this.myDataSource, {});
                
        var i=1,
            bReverseSorted = false;

// Track when Column is reverse-sorted, since new data will come in out of order
        var trackReverseSorts = function(oArg) {
            bReverseSorted = (oArg.dir === YAHOO.widget.DataTable.CLASS_DESC);
        };
        this.myDataTable.subscribe("columnSortEvent", trackReverseSorts);

// Add one row to the bottom
        var btnAddRow = new YAHOO.widget.Button("addrow");
        btnAddRow.on("click", function() {
            // Clear sort when necessary
            if(bReverseSorted) {
                this.myDataTable.set("sortedBy", null);
            }
            
            var record = YAHOO.widget.DataTable._cloneObject(data);
            record.row = i++;
            this.myDataTable.addRow(record);
        },this,true);

// Add 20 rows to the bottom
        var btnAddRows = new YAHOO.widget.Button("addrows");
        btnAddRows.on("click", function(e) {
            // Clear sort when necessary
            if(bReverseSorted) {
                this.myDataTable.set("sortedBy", null);
            }

YUI Logger Output:

Note: Logging and debugging is currently turned off for this example.

Reload with logging
and debugging enabled.

YUI Library Examples: DataTable Control: Adding and Deleting Rows

Sample Code for this Example

YUI Logger Output:

DataTable Control Examples:

More DataTable Control Resources: