Datatable Methods not working after adding Row with append

Question

Ive got a problem to solve. With .append() I do add new rows which have input fields. But the problem is, that after appending new rows no methods work on them. No methods like search, responsive button etc.

I tried a lot but I couldnt figure it out...After clicking on a button a new Row gets added to the #table.

var poAddRowTable = $('#table').DataTable();
$('button').on('click', function () {
    addRowFunc(true)
});

addRowFunc = function () {
    var previousRow = $('#table tr:last');
    var newRow = $(previousRow).clone(true, true);

    $('#table tbody').append(newRow);
    $("html, body").scrollTop($(document).height());
}

from your problem it looks like you are binding the event listener to elements generated dynamically therefore it is not working. if you can please share the html structure I might be able to help — warl0ck
– warl0ck, Commented Mar 31, 2017 at 9:43
@davidkonrad you sir are da best ;-) awesome thanks it worked! — NinjaCoder
– NinjaCoder, Commented Mar 31, 2017 at 10:22

Trung Duong · Accepted Answer · 2017-03-31 10:20:14Z

2

You should consider to use DataTable.row.add() for adding a new row to the data table.
Your addRowFunc should be updated like this

addRowFunc = function () {

    // Clone data from last row
    var lastRow = $('#table tr:last');
    var newRowdata = [];
    $('#table tr:last').find('td').each(function() {
        newRowdata.push($(this).text());
    }); 

    // Add new row to table
    poAddRowTable.row.add(newRowdata).draw();

    $("html, body").scrollTop($(document).height());
}

answered Mar 31, 2017 at 10:20

Trung Duong

3,4752 gold badges10 silver badges10 bronze badges

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

Comments

Community · Accepted Answer · 2017-05-23 12:32:29Z

0

I guess you have to refresh your table after appending, the following link can help :

How to refresh a simple Datatables table when adding new rows with jQuery

edited May 23, 2017 at 12:32

CommunityBot

11 silver badge

answered Mar 31, 2017 at 10:04

kanzari

874 bronze badges

Collectives™ on Stack Overflow

Datatable Methods not working after adding Row with append

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related