Duplicate DataTable Row with external button

Rhendar

So I have a basic DataTable that I want to have a button which is outside of the table itself and when that button is clicked a new row is added to the DataTable. Since the button isn't within a row using the keyword "this" isn't an option. I've found that you can add a row via the following code:

table.row.add(data).draw();

But where does one get the actual row data?

Here's basically what my code is:

https://jsfiddle.net/t7rcux9a/

kthorngren

But where does one get the actual row data?

data is a variable. It needs to be an array or object that matches the original structure of the table.

I updated your CSS and JS includes to have a working Datatable. I created the JS to show one way you can add the row you displayed in the HTML table.
https://jsfiddle.net/cms9v6gq/

Kevin

Rhendar

Kevin,

That is mostly working. Is there a way to use this with MVC Razor? If one of the <td> elements has an @Html.TextBox() object the code is literally writing @Html.TextBox() instead of actually rendering the object.

Rhendar

Never mind on my 2nd question. I found a work around by creating just a basic <Select> element and then dynamically populating it with a list of objects I get from the Controller. I also used unobtrusive ajax to prevent page refreshes.