Preamble

DataTables adding rows in DataTables is done by assigning the DataTables jQuery object to a variable when initialising it, and then using it's API methods to add a new row. Deleting rows can be done in a similar manner.

Live example

Click to add a new row

Initialisation code

/* Global variable for the DataTables object */
var oTable;

/* Global var for counter */
var giCount = 2;

$(document).ready(function() {
	oTable = $('#example').dataTable();
} );

function fnClickAddRow() {
	oTable.fnAddData( [
		giCount+".1",
		giCount+".2",
		giCount+".3",
		giCount+".4" ] );
	
	giCount++;
}

Other examples

Basic initialisation

• Zero configuration
• Feature enablement
• Sorting data
• Multi-column sorting
• Multiple tables
• Hidden columns
• DOM positioning
• State saving
• Alternative pagination styles
• Change language information (internationalisation)

Advanced initialisation

• Events (pre initialisation)
• Events (post initialisation)
• Column rendering
• Sorting without HTML tags
• Row callback
• Footer callback
• Ajax source
• Change language information from a file (internationalisation)

API

• Dynamically add a new row
• Dynamically create a table
• Individual column filtering
• Highlight rows and columns
• User selectable rows (multiple rows)
• User selectable rows (single row) and delete rows
• Editable rows (with jEditable)
• Submit form with elements in table
• Add custom API functions (plug-ins)

Please refer to the DataTables documentation for full information about it's API properties and methods.