Add or remove row from client input and store them in an object
Add or remove row from client input and store them in an object
metadev
Posts: 17Questions: 6Answers: 0
Hello. I am trying to implement a dynamic table where I can add or remove row based on button clicks. I have implemented a basic working example here https://live.datatables.net/tagigike/2/edit
What I am looking for is
1. When I enter the input fields and click on the Add Row button, I want to insert a row in the bottom table (table with id arrTable)
2. When I select row(s) from the bottom table (table with id arrTable) and click on the Delete row button, I want to remove said selected rows
3. Finally, when I click on the Save as draft button, I want to console.log the object arrearToSave which would be in the format
{
empDetail: {
ein: "",
name: ""
},
arrearDetail: [
{
month: "",
year: ""
},
// multiple objects based on multiple selections
]
}
This question has an accepted answers - jump to answer
Answers
Since you have defined
columns.dataDatatables expects the row data in object form, not array. See the updated example.Looks like you want to use the select extension. I added the select library to the example.
When using the select extension use the
selector-modifierof{selected: true}to get the selected rows.Chain
toArray()to convert the API result into a standard array. Optionally you could userow()instead ofrows()withvar payloadEmp = dataEmp[0]to get only the first element. And use theselector-modifierof{selected: true}.Updated example:
https://live.datatables.net/tagigike/4/edit
Kevin
I removed the dataList parameter from the second table and just initialized it empty. If you want to put it back you can. Might be better to pass an empty array rather than
nullbutnullseems to work. Unless you plan to change the Datatable configuration you normally won't want to usedestroy, instead useclear()to clear the table withrows.add()to add new rows.Kevin
@kthorngren I tried with just HTML and js before but figured I might have more complex procedures in future and decided to go with datatables. Nevertheless, thank you so much.