Preview Downloads Purchase

Documentation v8.0.36

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 1	Column 2	Column 3	Column 4	Column 5
1.1	1.2	1.3	1.4	1.5
Column 1	Column 2	Column 3	Column 4	Column 5

Showing 1 to 1 of 1 records

														HTML
													

														JAVASCRIPT
													

															<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-bold 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).

Name	Age	Position	Office
Airi Satou
Ashton Cox
Bradley Greer
Brielle Williamson
Cedric Kelly
Charde Marshall
Colleen Hurst
Garrett Winters
Gloria Little
Haley Kennedy

Showing 1 to 10 of 19 records

														HTML
													

														JAVASCRIPT
													

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