File Upload Datatable

Question

Hi

I have below code . I want if user clicks add . Then a row should be added in Jquery DataTable with 4 columns as below. If uer clicks on Delete then that row should be deleted. By default Jquery datatable be shown with No Records Found.

Sr.No, DropDown Value,FileName attached, Delete button.

Thanks

Naimish Makwana · Answer

Try below code jQuery DataTable Add/Delete Row Example /* Optional styling */ .form-control { width: 100%; padding: 5px; } .form-control-file { width: 100%; padding: 5px; } .deleteBtn { padding: 5px 10px; background-color: #ff4d4d; border: none; color: white; cursor: pointer; } .deleteBtn:hover { background-color: #ff1a1a; } Add Row Sr.No Dropdown Value FileName Attached Action $(document).ready(function() { // Initialize DataTable var table = $('#example').DataTable({ "language": { "emptyTable": "No Records Found" }, "columnDefs": [ { "orderable": false, "targets": [1,2,3] } // Disable ordering on specified columns ] }); // Function to add a new row $('#addRowBtn').on('click', function() { // Get the current number of rows to set Sr.No var rowCount = table.rows().count() + 1; // Define dropdown options var dropdown = ` Select Option Option 1 Option 2 Option 3 `; // Define file input var fileInput = ` `; // Define delete button var deleteButton = ` Delete `; // Add the row to the table table.row.add([ rowCount, dropdown, fileInput, deleteButton ]).draw(false); }); // Delete row functionality $('#example tbody').on('click', '.deleteBtn', function () { table.row($(this).parents('tr')).remove().draw(); // Update Sr.No after deletion table.rows().every(function(rowIdx, tableLoop, rowLoop){ this.cell(rowIdx, 0).data(rowIdx + 1); }); }); }); Thanks