Get the Datatables cell value that the textbox enters
I am creating DataTable with javascript datasource. The data is returned from a nodejs ajax call which queries a SQL Server SQL table and returns 2 columns as numeric data. I add 2 more columns to store input fields with a default value of 0 for the user to enter numbers that increase / decrease the values found in column A / B.
$('#mytable').DataTable( {
"data": data,
"columns": [
{ "data": "ColumnA", "defaultContent": "NA" },
{ "data": "ColumnB", "defaultContent": "NA" },
{ "data": undefined, "defaultContent": '<input type="text" value="0" size="10"/>'},
{ "data": undefined, "defaultContent": '<input type="text" value="0" size="10"/>'}
]
});
This renders just fine and I can change the text in the input field in the cell. There is a separate input field outside the table that the user can click to "submit changes" that calls a javascript function that will read those input fields of the table. However, I cannot figure out how to get them. Using:
var aTable = $('#mytable').DataTable();
var colAchange = atable.cell(0, 2).data();
var colBchange = atable.cell(0, 3).data();
Both colA / Bchange symbols have the text "input type =" text "..." html, not the value of the input field. It makes sense, but I can't seem to find the correct way to read the value of the input field. I read sometime in the Datatables docs that you can add "meta" data to string data. Do I need to do this to get the "id" of this item and request the item? Otherwise, how do I get this input value?
source to share
If you just want to extract the values entered in the input fields, you must go through jQuery or your own DOM. The dataTables itself doesn't know the changes it made to shape the input fields, so trying to get the values using cell().data()
will never work with or without id
/ orthogonal data:
aTable.cell(0,2).nodes().to$().find('input').val()
aTable.cell(0,3).nodes().to$().find('input').val()
Gives you the current value of the various inputs. Repeat the above scenario 100% in this script -> http://jsfiddle.net/obmghyo7/
Basically this is also how the official documentation suggests a way to extract values from form input -> https://datatables.net/examples/api/form.html
If you want to filter / search a table that also includes the changes made by the user in the form inputs, then this is a bit tricky -> JQuery Search datatables inside the input and select (mine, but I don't know a better answer)
source to share