How to append data to datatables in jquery?

Question

I have been trying to append data to a data table in jquery, data is appending to data table but data table is not working properly that means sorting, pagination, the search is not working. Even data is there in the data table but it is showing 0 records. Am trying to make all functionalities work properly, please help me on this.

<table id="newexample1">
    <thead>
        <tr>
            <th>Name</th>
            <th>Employee</th>
            <th>InTime</th>
        </tr>
    </thead>
    <tbody class="tablebody">
    </tbody>
</table>
<script>
    function newfunction() {
        $(".tablebody").append("<tr onclick='historyfunction()'><td>Sasi Kumar</td><td>Suresh Kumar</td><td>21/06/2019 10:59:02</td></tr>");
    }
</script>
<script>
    $(document).ready(function() {
        $('#newexample1').DataTable();
    });
</script>

Am expecting a proper data table.

there is no error, but sorting, pagination, search box are not working — Sasi Kumar
– Sasi Kumar, Commented Jul 2, 2019 at 13:42
Read the descriptions of the tags you use, please. datatable is wrong. — Quentin
– Quentin, Commented Jul 2, 2019 at 13:44
After appending the new rows, you have to destroy and re-draw the table then everything will be fine — Mayank Pandeyz
– Mayank Pandeyz, Commented Jul 2, 2019 at 13:54

Wolfetto · Accepted Answer · 2019-07-02 20:10:29Z

2

function newfunction() {
        $(".tablebody").append("<tr onclick='historyfunction()'><td>Sasi Kumar</td><td>Suresh Kumar</td><td>21/06/2019 10:59:02</td></tr>");
        $(".tablebody").append("<tr onclick='historyfunction()'><td>omar omar</td><td>Suresh Kumar</td><td>21/06/2019 10:59:02</td></tr>");
    }

    $(document).ready(function() {
        newfunction();
        $('#newexample1').DataTable();
    });

Here a working JSfiddle

In your code newfunction() is never called so the table is empty when Datatable tries to render the table. Add row before render Datatable is instantiated in $(document).ready(function()(otherwise you get 0 rows table). Otherwise, if you would add rows after Datatable is rendered, use rows.add() and then redraw the table on the screen with draw() function.

edited Jul 2, 2019 at 20:10

answered Jul 2, 2019 at 14:31

Wolfetto

1,20010 silver badges21 bronze badges

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

Collectives™ on Stack Overflow

How to append data to datatables in jquery?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related