Function to add rows to a dataTable in jquery gives TypeError

Question

In my Jquery dataTable, row.add is not working and throws an error saying the add function is undefined. The error message is:

Uncaught TypeError: Cannot read property 'add' of undefined

jsfiddle link

html

<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Column 1</th>
                <th>Column 2</th>
                <th>Column 3</th>
            </tr>
        </thead>

        <tfoot>
            <tr>
                <th>Column 1</th>
                <th>Column 2</th>
                <th>Column 3</th>
            </tr>
        </tfoot>
    </table>
<button id="addRow">Add new row</button>

javascript

$(document).ready(function() {

    var counter = 1;
    var prntTable = $('#example').dataTable( {  
       "aoColumns" : [ 
           {"bSearchable" : false}, 
           {"bSearchable" : true}, 
           {"bSearchable" : true}
        ],                                          
        "sPaginationType" : "full_numbers"
    } );

    $('#addRow').on( 'click', function () {
        prntTable.row.add( [
            counter +'.1',
            counter +'.2',
            counter +'.3'
        ] ).draw();

        counter++;
    } ); 

    $('#addRow').click();
} );

Ankur Mahajan · Accepted Answer · 2015-09-26 09:38:59Z

18

Instead of:

var prntTable = $("#example").dataTable();

Try:

var prntTable = $("#example").DataTable();

It looks like the old datatables API dataTable() does not support the function you are calling. Use the new API with: DataTable(). Read here for more info: Datatable API

answered Sep 26, 2015 at 9:38

Ankur Mahajan

3,6143 gold badges36 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Howard Over a year ago

This solved my problem. The old dataTable() should not even exist.

Nibin · Accepted Answer · 2014-11-25 06:21:11Z

4

 $('#addRow').on( 'click', function () {
       prntTable.row.add( [
            counter +'.1',
            counter +'.2',
            counter +'.3'
        ] ).draw();

        counter++;
    } );

In this code the prntTable is undefined.Either define it as a global variable or redefine it in the click function

Add the

var prntTable = $('#example').DataTable();

after the click function

Fiddle

answered Nov 25, 2014 at 6:21

Nibin

3,9602 gold badges22 silver badges40 bronze badges

4 Comments

Prasanth A R Over a year ago

i got error Uncaught TypeError: Cannot read property 'add' of undefined

Nibin Over a year ago

the fiddle works fine for me..Have you checked it..??

Nibin Over a year ago

the undefined error is caused due to the above reason.Do clear your browser cache before checkin it mate.. :)

N1mr0d Over a year ago

I think it is important to note that Ankur's answer below helps clarify the answer. Even though Outlooker says to use DataTable, I glossed over the capital D the first time I read it. table.row.add() will not work if you are using dataTable. you must use DataTable. This fixed the problem I was having and I verified it in the fiddle from Outlooker.

saad elshazly · Accepted Answer · 2017-05-10 08:00:01Z

2

try to use fnAddData it works for me

table.fnAddData(['1','1','2','3','4']);

answered May 10, 2017 at 8:00

saad elshazly

312 bronze badges

1 Comment

krishna patel Over a year ago

table.fnAddData(['1','1','2','3','4']); i am getting error table.fnAddData is not a function

Collectives™ on Stack Overflow

Function to add rows to a dataTable in jquery gives TypeError

3 Answers 3

1 Comment

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related