row.add()

Add a new row to the table.

Description

Adding new data to a table is central to the concept of being able to dynamically control the content of a DataTable, and this method provides the ability to do exactly that. It will add a single row at a time - for addition of multiple rows, either call this method multiple times, or use this method's plural counterpart: rows.add().

The rows that are added are subjected to the ordering and search criteria that are applied to the table, which will determine the new row's position and visibility in the table.

This method will add the data to the table internally, but does not visually update the tables display to account for this new data. In order to have the table's display updated, use the draw() method, which can be called simply as a chained method of the row.add() method's returned object - for example table.row.add( [ 1, 2, 3, 4 ] ).draw();. This is done to allow easy optimisation of the table where multiple rows can be added before the table is redrawn.

Please note that the returned value is a DataTables API that contains a reference to the row that was added (i.e. as if you had used row() to select it). You can then chain other methods such as row().data() to get the row's data. The row().node() method is also available, but it would only return the node if the deferRender option is disabled or the table has been drawn. This is due to the deferRender option being enabled by default (since 2.0.0) to improve general performance, and results in the nodes only being created when needed for a draw.

Type

Examples

var table = new DataTable('#myTable');

table.row
	.add({
		name: 'Tiger Nixon',
		position: 'System Architect',
		salary: '$3,120',
		start_date: '2011/04/25',
		office: 'Edinburgh',
		extn: '5421'
	})
	.draw();

var table = new DataTable('#myTable');

var rowNode = table.row
	.add(['Fiona White', 32, 'Edinburgh'])
	.draw()
	.node();

$(rowNode)
	.css('color', 'red')
	.animate({ color: 'black' });

Related

The following options are directly related and may also be useful in your application development.