NickName:K Jackson Ask DateTime:2017-03-21T11:09:21

Get Datatables cell value that is input text field

I'm generating a DataTable with a javascript data source. The data is returned from an ajax call to nodejs which queries SQL Server DB table and returns 2 columns, both numerical data. I'm adding 2 more columns to hold input fields, with default value of 0, for the user to enter numbers that will increase/decrease the values found in ColumnA/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 modify 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', which 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 vars just have the 'input type="text" ...' html text, not the value of the input field. This does make sense, but I cannot find the right way to read the value of the input field. At one time I had read in the Datatables docs that you can add 'meta' data to the row data. Do I need to do that to get an "id" on that element and query the element by that? Otherwise how do I get that input's value?

Copyright Notice：Content Author:「K Jackson」，Reproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article：https://stackoverflow.com/questions/42917738/get-datatables-cell-value-that-is-input-text-field

Answers

davidkonrad 2017-03-21T05:34:40

If you just want to extract the values entered in the input boxes, you must go through jQuery or native DOM. dataTables itself is not aware of any changes made to form input fields, so trying to retrieve the values by cell().data() will never work, with or without id's / orthogonal data :\n\naTable.cell(0,2).nodes().to$().find('input').val()\naTable.cell(0,3).nodes().to$().find('input').val() \n\n\nWill give you the current value of the various inputs. Have replicated your above scenario 100% in this fiddle -> http://jsfiddle.net/obmghyo7/\n\nThis is basically also how the official documentation suggests a way to extract values from form inputs -> https://datatables.net/examples/api/form.html\n\nIf you want to perform filtering / searches within the table, which also includes changes made by the user in form inputs, then it is a little more tricky -> JQuery Datatables search within input and select (mine, but I dont know any better answer)",

Max Voisard 2020-02-07T20:40:24

I have a sort of hackish yet applicable and simple solution. The thing to note is my code DOES allow usage of the DataTables data() method and also that this is more of a solution for anybody receiving HTML code instead of inner text from each cell of a row, rather than trying to get the value of an input text box. The row clicked on returns an array through data(). Each cell of the row is wrapped in a span so any plaintext/non-HTML strings inside a td can be rendered as HTML elements and therefore be recognized by the jQuery text() method:\n\n$('#mytable tbody').on('click', 'tr', function (e) {\n var rowArray = aTable.row(this).data();\n var colAchange = $('<span/>').html(rowArray[0]).text();\n var colBchange = $('<span/>').html(rowArray[1]).text();\n});\n\n\nJSFiddle: https://jsfiddle.net/nyv7j6h8/",