Trying to dynamically add a row via javascript

Trying to dynamically add a row via javascript

dilipbandidilipbandi Posts: 2Questions: 1Answers: 0

I'm using version 1.10.2. According to the documentation, fnAddData is deprecated prior to 1.10.

What I'm doing is I'm moving a row from one table to another via a click event. The click event does an ajax call to the server to check for duplicates. Upon the ajax return, is the JavaScript to add the row in the other table. I have a global JavaScript variable which keeps the initialization of the DataTable.

According to the documentation I should be able to do ClientCurrentAlertList.row.add([a, b, c]);

However I get the following: 0x800a138f - JavaScript runtime error: Unable to get property 'add' of undefined or null reference

What am I doing wrong? I can look at ClientCurrentAlertList and access the fnAddData function.

I include Jquery-1.10.2.js, jquery.dataTables.js. Why is the "add" property undefined? This is not the first time this question has been asked. Unfortunately, the question was closed with no other explaination.

This question has an accepted answers - jump to answer

Answers

  • nava1021nava1021 Posts: 9Questions: 0Answers: 1

    I have been usig the following logic to add new rows dynamically. The new row in the example below is a new table itself.

    May be this could help you.

    //click event on button control inside #table
    $('#table').on('click', 'button', function () {
    row.child( GetHtml( obj ) ).show();
    }
    
    //template for new row
    function GetHtml( obj ) {
       return '<table id="'+ id +'"><tr><td>'+ obj.some_value +'</td></tr>' +    '</table>';
    }
    
    
  • allanallan Posts: 63,498Questions: 1Answers: 10,470 Site admin
    Answer ✓

    Based on the error you are getting I'm fairly confident that you are using the $().dataTable() constructor rather than the $().DataTable() one (note the capital D).

    The difference is that $().dataTable() returns a jQuery instance, augmented with the DataTables legacy API methods. Augmenting jQuery like that wasn't really scalable, so 1.10 introduced $().DataTable() which returns an API instance and all of the new API methods are available there.

    See also this FAQ.

    Regards,
    Allan

  • dilipbandidilipbandi Posts: 2Questions: 1Answers: 0

    That was it. Thank you. It is now fixed.

  • eliotjseeliotjse Posts: 5Questions: 0Answers: 0

    This can also be helpful but not always at times. I have debugged this myself and will not take much time even if you have more data.

    var table = $(".tableclassName")["1"]
    var tableClone = $(".tableclassName")["3"]
    $(yournewrowtext).insertAfter(table.children["1"].children[currentRowId]);
    $(yourfirstcolumn).insertAfter(tableClone.children["1"].
    children[currentRowId]);

    Note: If you are not using fixed column then you can remove this line $(yourfirstcolumn).insertAfter(tableClone.children["1"].
    https://stackoverflow.com/questions/12444296/jquery-datatables-add-new-row/44155228#44155228

This discussion has been closed.