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
<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).
<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;
});
2025©
Md Abdul Momin
