CODEWITHSUNDEEP
javascriptjquerydatatables
Winston
Winston

Reputation: 49

Jquery DataTables not working for append html using javascript

I am using a jQuery DataTables style for the responsive layout, but when I use javascript to append <td>Mycode</td> in the table, then the dataTables style not working, any idea?

Upvotes: 3

Views: 2338

Answers (2)

Amit Nikam
Amit Nikam

Reputation: 41

DataTable does not work in append in javascript, because after calling .DataTable method our append method calls. If you debug your javascript code, then you will find that .DataTable call before .append. Check our table body, it does not render at time when .DataTable calls. So write .DataTable method after .append method.

$('#grdWrkServiceEntry').append(tableBody);
$('#grdWrkServiceEntry').DataTable();

I also faced the same problem, but now it is resolved.

Upvotes: 1

Husni Salax
Husni Salax

Reputation: 2020

Here We go:

In documentation I find it: 

New rows can be added to a DataTable very easily using the row.add() API method.

Try add new row as this like code:

function row.add() can help you;)

    $(document).ready(function() {
        var t = $('#yourDataTableId').DataTable();
        var counter = 1;

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

            counter++;
        } );


        $('#addRow').click();
    } );
<button id="addRow">Add new row</button>

Hope it helps;)

Upvotes: 0

Related Questions