获取作为输入文本字段的 Datatables 单元格值 [英] Get Datatables cell value that is input text field

问题描述

我正在生成一个带有 javascript 数据源的 DataTable.data 是从对 nodejs 的 ajax 调用返回的，nodejs 查询 SQL Server 数据库表并返回 2 列，都是数字数据.我再添加 2 列来保存输入字段，默认值为 0，供用户输入数字，这些数字将增加/减少在 ColumnA/B 中找到的值.

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"/>'}
    ]
});

这呈现得很好，我可以修改单元格输入字段中的文本.表格外有一个单独的输入字段，用户可以单击以提交更改"，该字段会调用一个 javascript 函数来读取表格的这些输入字段.但是，我不知道如何获得它们.使用:

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();

colA/Bchange 变量都只有 'input type="text" ...' html 文本，而不是输入字段的值.这确实有道理，但我找不到读取输入字段值的正确方法.有一次，我在 Datatables 文档中读到，您可以将元"数据添加到行数据中.我是否需要这样做才能在该元素上获取id"并通过该元素查询该元素?否则我如何获得该输入的值?

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?

推荐答案

如果您只想提取输入框中输入的值，您必须通过 jQuery 或原生 DOM.dataTables 本身不知道对表单输入字段所做的任何更改，因此尝试通过 cell().data() 检索值将永远无法工作，无论是否使用 id的/正交数据:

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 :

aTable.cell(0,2).nodes().to$().find('input').val()
aTable.cell(0,3).nodes().to$().find('input').val()   

将为您提供各种输入的当前值.在这个小提琴中 100% 复制了你的上述场景 -> http://jsfiddle.net/obmghyo7/

Will give you the current value of the various inputs. Have replicated your above scenario 100% in this fiddle -> http://jsfiddle.net/obmghyo7/

这基本上也是官方文档如何建议从表单输入中提取值的方法 -> https://datatables.net/examples/api/form.html

This is basically also how the official documentation suggests a way to extract values from form inputs -> https://datatables.net/examples/api/form.html

如果您想在表中执行过滤/搜索，其中还包括用户在表单输入中所做的更改，那么它有点棘手 -> JQuery Datatables 在输入中搜索并选择(我的，但我不知道更好的答案)

If 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)

这篇关于获取作为输入文本字段的 Datatables 单元格值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！