Jquery DataTables not working for append html using javascript

Question

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?

Can you share your code here? if you want to add a new Data row in Jquery dataTable you can use datatable's row.add method — progrAmmar
– progrAmmar, Commented Apr 28, 2016 at 7:35
Welcome to SO. Please visit the help center and take the tour to see what and how to ask here. HINT: Post code and effort — mplungjan
– mplungjan, Commented Apr 28, 2016 at 7:40

Amit Nikam · Accepted Answer · 2019-12-10 10:28:36Z

1

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.

edited Dec 10, 2019 at 10:28

answered Dec 9, 2019 at 13:58

Amit Nikam

516 bronze badges

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

Comments

Husni Salax · Accepted Answer · 2016-04-28 07:51:27Z

0

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

edited Apr 28, 2016 at 7:51

answered Apr 28, 2016 at 7:46

Husni Salax

2,0181 gold badge21 silver badges30 bronze badges

Collectives™ on Stack Overflow

Jquery DataTables not working for append html using javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related