So, I have a dataTable that gets its data from ajax. I want two of the columns to have text inputs so that the user may edit and update the information by clicking a button in the same row. This works fine like this:
{
"render": function ( data, type, row ) {
return '<input id="nameInput" type="text" value="' + row.name + '" />';
},
"targets": 0
},
{
"render": function ( data, type, row ) {
return '<input id="hourlyRateInput" type="text" value="' + row.hourlyRate + '" />';
},
"targets": 1
},
{
"targets": 2,
"data": null,
"defaultContent": "<button>Update</button>"
},
The data is loaded into the editable text input. However, I can't find a way to extract the value from the input after this. The closest I've e is
var data = table.row( $(this).parents('tr') ).data();
which give successfully gives me the data from that row. However, the text input value never changes. If the user edits the text, data.name gives me the old data that was originally loaded into the table. Is there an efficient way to pull this data out of the text input?
So, I have a dataTable that gets its data from ajax. I want two of the columns to have text inputs so that the user may edit and update the information by clicking a button in the same row. This works fine like this:
{
"render": function ( data, type, row ) {
return '<input id="nameInput" type="text" value="' + row.name + '" />';
},
"targets": 0
},
{
"render": function ( data, type, row ) {
return '<input id="hourlyRateInput" type="text" value="' + row.hourlyRate + '" />';
},
"targets": 1
},
{
"targets": 2,
"data": null,
"defaultContent": "<button>Update</button>"
},
The data is loaded into the editable text input. However, I can't find a way to extract the value from the input after this. The closest I've e is
var data = table.row( $(this).parents('tr') ).data();
which give successfully gives me the data from that row. However, the text input value never changes. If the user edits the text, data.name gives me the old data that was originally loaded into the table. Is there an efficient way to pull this data out of the text input?
Share Improve this question edited Feb 11, 2015 at 22:58 A.L 10.5k10 gold badges71 silver badges105 bronze badges asked Feb 11, 2015 at 21:32 effendoeffendo 931 silver badge8 bronze badges 1-
Use
.attr('data-name')
to get the updated attribute since.data()
is stored locally and will retain its old value unless you set it. – Venkata Krishna Commented Feb 11, 2015 at 21:35
2 Answers
Reset to default 7In the click event of the update button, you can get the values from the inputs like this:
var nameInput = $(this).closest('tr').find('#nameInput').val();
var hourlyRateInput = $(this).closest('tr').find('#hourlyRateInput').val();
This works by getting the parent of this
(which is your update button) and then locating the selectors by Id.
Really, the Id's should be classes because the way you're doing it produces duplicate Id's.
'<input class="nameInput" ...
And then you would get the value like this:
var nameInput = $(this).closest('tr').find('.nameInput').val();
You should use .attr('data-name')
as .data()
give the initial value.