mesutd0nmez
10/13/2017 - 3:25 PM

Datatables add row

Datatable add new row on top of list.

var employersTable = $('#employersTable').DataTable();
console.log(employersTable);

var i = 1;

$('#addRow').click(function(){
    var row = $('<tr>');
        row.append('<td>added row</td>')
            .append('<td>Test ' + (i++) + '</td>')
            .append('<td>123</td>')
            .append('<td>2014-05-09</td>')
            .append('<td>No</td>')
            .append('<td>blub</td>')

    employersTable.row.add(row);
    $('#employersTable tbody').prepend(row);
});
<table class="table table-striped table-bordered table-hover" id="employersTable">
            <thead>
                <tr>
                    <th style="width: 10%;">Username</th>
                    <th style="width: 20%;">Employer</th>
                    <th style="width: 5%;">Phone</th>
                    <th style="width: 6%;">Birthday</th>
                    <th style="width: 10%;">Holiday?</th>
                    <th style="width: 10%;">Actions</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th>test</th>
                    <th>Test Test</th>
                    <th>999</th>
                    <th>1970-01-01</th>
                    <th>Yes</th>
                    <th>
                        <a href="javascript:;" class="btn btn-primary btn-xs buttonUserEdit" data-id="1">Edit</a>
                        <a href="javascript:;" class="btn btn-danger btn-xs buttonUserDelete" data-id="1">Delete</a>
                    </th>
                </tr>
            </tbody>
        </table>
<button id="addRow"  onclick="addNewRow();">ADD</button>