Logo

Documentation v8.1.5

  • Home
  • DataTables
  • API
Preview Downloads Purchase
Light
Dark
System

Add Rows

New rows can be added to a DataTable using the row.add()API method. Simply call the API function with the data for the new row (be it an array or object).
Column 1Column 2Column 3Column 4Column 5
1.11.21.31.41.5
Column 1Column 2Column 3Column 4Column 5
Showing 1 to 1 of 1 records
<div class="pb-10">
    <button class="btn btn-primary" id="kt_datatable_example_1_addrow">Add New Row</button>
</div>
<table id="kt_datatable_example_1" class="table table-striped table-row-bordered gy-5 gs-7">
    <thead>
        <tr class="fw-semibold fs-6 text-gray-800">
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
            <th>Column 4</th>
            <th>Column 5</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
            <th>Column 4</th>
            <th>Column 5</th>
        </tr>
    </tfoot>
</table>
var t = $("#kt_datatable_example_1").DataTable();
var counter = 1;

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

    counter++;
});

// Automatically add a first row of data
$("#kt_datatable_example_1_addrow").click();

Form Inputs

In order to perform paging, ordering, searching etc, DataTables can remove rows and cells from the document (i.e. those rows / cells which are not needed are not inserted into the document).
<div class="pb-10">
    <button class="btn btn-primary" id="kt_datatable_example_2_submit">Submit Form</button>
</div>
<table id="kt_datatable_example_2" class="table table-row-bordered table-row-dashed gy-5">
    <thead>
        <tr class="fw-semibold fs-6 text-gray-800">
            <th>Name</th>
            <th>Age</th>
            <th>Position</th>
            <th>Office</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td><input type="text" class="form-control  form-control-solid" id="row-1-age" name="row-1-age" value="61"/></td>
            <td><input type="text" class="form-control  form-control-solid" id="row-1-position" name="row-1-position" value="System Architect"/></td>
            <td>
                <select  class="form-select  form-select-solid" size="1" id="row-1-office" name="row-1-office">
                    <option value="Edinburgh" selected="selected">
                        Edinburgh
                    </option>
                    <option value="London">
                        London
                    </option>
                    <option value="New York">
                        New York
                    </option>
                    <option value="San Francisco">
                        San Francisco
                    </option>
                    <option value="Tokyo">
                        Tokyo
                    </option>
                </select>
            </td>
        </tr>
        <tr>
            <td>Garrett Winters</td>
            <td><input type="text" class="form-control  form-control-solid" id="row-2-age" name="row-2-age" value="63"/></td>
            <td><input type="text" class="form-control  form-control-solid" id="row-2-position" name="row-2-position" value="Accountant"/></td>
            <td>
                <select  class="form-select  form-select-solid" size="1" id="row-2-office" name="row-2-office">
                    <option value="Edinburgh">
                        Edinburgh
                    </option>
                    <option value="London">
                        London
                    </option>
                    <option value="New York">
                        New York
                    </option>
                    <option value="San Francisco">
                        San Francisco
                    </option>
                    <option value="Tokyo" selected="selected">
                        Tokyo
                    </option>
                </select>
            </td>
        </tr>
    </tbody>
</table>
var table = $("#kt_datatable_example_2").DataTable({
    columnDefs: [{
        orderable: false,
        targets: [1, 2, 3]
    }]
});

$("#kt_datatable_example_2_submit").click(function() {
    var data = table.$("input, select").serialize();
    alert(
        "The following data would have been submitted to the server: \n\n" +
        data.substr(0, 120) + "..."
    );
    return false;
});
Learn & Get Inspired

Support at devs.keenthemes.com

Join our developers community to find answer to your question and help others. FAQs
Get Support
Video Tutorials
From guides and how-tos, to live demos and code examples to get started right away.
Metronic Downloads
Download your prefered framework and demo with one click.
What's New ?
Latest features and improvements added with our users feedback in mind.
Buy now