YUI Library Home

Site Search (YDN & YUIBlog):

# YUI Library Examples: DataTable Control: Adding and Deleting Rows

# DataTable Control: Adding and Deleting Rows

Adding and deleting rows dynamically.

View example in new window.

## Sample Code for this Example

Data:

CSS:

#buttons {margin-bottom: 1em;}

Markup:

<div id="buttons"> <span id="addrow" class="yui-button yui-push-button"> <span class="first-child"> <button type="button">Add one row</button> </span> </span> <span id="deleterow" class="yui-button yui-push-button"> <span class="first-child"> <button type="button">Delete top row</button> </span> </span> <span id="addrows" class="yui-button yui-push-button"> <span class="first-child"> <button type="button">Add 20 rows</button> </span> </span> <span id="deleterows" class="yui-button yui-push-button"> <span class="first-child"> <button type="button" name="button5">Delete top 20 rows</button> </span> </span> </div> <div id="basic"></div>

JavaScript:

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); } var myArray = []; for(var l=i;i<=l+19;i++) { var record = YAHOO.widget.DataTable._cloneObject(data); record.row = i; myArray.push(record); } this.myDataTable.addRows(myArray); },this,true); // Delete one row from the top var btnDeleteRow = new YAHOO.widget.Button("deleterow"); btnDeleteRow.on("click", function() { if(this.myDataTable.getRecordSet().getLength() > 0) { this.myDataTable.deleteRow(0); } },this,true); // Delete 20 row from the top var btnDeleteRows = new YAHOO.widget.Button("deleterows"); btnDeleteRows.on("click", function() { var length = this.myDataTable.getRecordSet().getLength(); if(length > 0) { var count = (length > 19) ? 20 : length; this.myDataTable.deleteRows(0,count); } },this,true); }; });

### YUI Logger Output:

Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.

Reload with logging
and debugging disabled.

### DataTable Control Examples:

- Basic Example
- Progressive Enhancement
- Custom Cell Formatting
- Conditional row coloring
- Nested Headers
- JSON Data Over XHR
- XML Data Over XHR With POST
- Textual Data Over XHR
- Local XML Data
- Adding and Deleting Rows
- Client-side Pagination
- Client-side Sorting
- Server-side Pagination and Sorting for Dynamic Data
- XY-scrolling, Y-scrolling, and X-scrolling
- Row Selection
- Cell Selection
- Inline Cell Editing
- Context Menu Integration
- Showing, Hiding, and Reordering Columns.
- Highlighting Cells, Rows, or Columns
- Complex Example of Multiple Features
- Datatable with Autocomplete
- Skinning Model
- Configuring the Paginator (included with examples for Paginator)
- Complex Application (included with examples for Layout Manager)

### More DataTable Control Resources:

- User's Guide (external)
- API Documentation
- Cheat Sheet PDF (external)

Copyright © 2008 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings