CODEWITHSUNDEEP
javascriptjquerydatatables
NinjaCoder
NinjaCoder

Reputation: 111

Datatable Methods not working after adding Row with append

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());
}

Upvotes: 1

Views: 2861

Answers (2)

Trung Duong
Trung Duong

Reputation: 3475

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());
}

Upvotes: 2

kanzari
kanzari

Reputation: 87

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

Upvotes: 0

Related Questions