DataTables add row example

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

Column 1Column 2Column 3Column 4
allan allan allan allan
Showing 1 to 1 of 1 entries

Initialisation code

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* Global var for counter */
var giCount = 1;
 
$(document).ready(function() {
    $('#example').dataTable();
} );
 
function fnClickAddRow() {
    $('#example').dataTable().fnAddData( [
        giCount+".1",
        giCount+".2",
        giCount+".3",
        giCount+".4" ] );
     
    giCount++;
}

Other examples

Basic initialisation

Advanced initialisation

API

Data sources

Server-side processing

Ajax data source

Plug-ins