CODEWITHSUNDEEP
jquerydatatables
Mr bond
Mr bond

Reputation: 133

How to add new row as html in existing datatable

Here is the sample html that I have created for my requirement. Basically I want to add a new row to existing datatable, where the source to datatable is the html dom table. And while adding new row, I need to append it first to the dom table and datatable should be re-initialize / newly created with that additional row.

<head>

<link type="text/css" rel="stylesheet" href="http://cdn.datatables.net/1.10.4/css/jquery.dataTables.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>

</head>

<body>
<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>

        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>

        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
            <tr>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>2009/01/12</td>
                <td>$86,000</td>
            </tr>
            <tr>
                <td>Cedric Kelly</td>
                <td>Senior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>2012/03/29</td>
                <td>$433,060</td>
            </tr>
        </tbody>
    </table>


</body>


<script>

$(document).ready(function() {

    var dt = $('#example').dataTable();


    $('#example tbody').append('<tr><td>bond</td><td>abc</td><td>xyz</td><td>22</td><td>2012/03/29</td><td>$433,060</td></tr>');

    dt.destroy();

    $('#example').dataTable();

}); 
</script>

Upvotes: 2

Views: 4357

Answers (2)

Vitalij
Vitalij

Reputation: 714

I know this super old post, but if anyone is still looking for an answer, you can easily do it with the following:

  1. Easiest way is to use rows.add passing your html, wrapped in jquery and redrawing the table
var dt = $('#example').dataTable();
var row = '<tr><td>bond</td><td>abc</td><td>xyz</td><td>22</td><td>2012/03/29</td><td>$433,060</td></tr>';
dt.rows.add($(row)).draw();
  1. Or what you did, destroying the table, appending your html and reinitialize datatable again (you just had to destroy the datatable first, and then append)
var dt = $('#example').dataTable();
var row = '<tr><td>bond</td><td>abc</td><td>xyz</td><td>22</td><td>2012/03/29</td><td>$433,060</td></tr>';
dt.destroy();
$('#example tbody').append(row);
dt = $('#example').dataTable();

Upvotes: 1

Cl&#233;ment Pr&#233;vost
Cl&#233;ment Pr&#233;vost

Reputation: 8650

You can't add a row using direct html tag manipulation once the table is instanciated, use the method from the documentation:

var t = $('#example').DataTable();
var counter = 1;

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

    counter++;
} );

// Automatically add a first row of data
$('#addRow').click();

Upvotes: 0

Related Questions