Question

我正在使用javascript数据源生成DataTable。数据从ajax调用返回到nodejs，后者查询SQL Server数据库表并返回2列数字数据。我添加了2个列来保存输入字段，默认值为0，供用户输入将增加/减少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函数。但是，我无法弄清楚如何获得它们。使用：

var aTable = $('#mytable').DataTable();
var colAchange = atable.cell(0, 2).data();
var colBchange = atable.cell(0, 3).data();

colA / Bchange vars只有'input type =“text”...'html文本，而不是输入字段的值。这确实有意义，但我找不到正确的方法来读取输入字段的值。有一段时间我在Datatables文档中读过你可以将'meta'数据添加到行数据中。我是否需要这样做才能在该元素上获得“id”并通过该元素查询元素？否则我如何获得该输入的值？

Answer 1

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

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

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

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

如果您想在表格中执行过滤/搜索，其中还包括用户在表单输入中所做的更改，那么它有点棘手 - ＆gt; JQuery Datatables search within input and select （我的，但我不知道更好的答案）

Answer 2

我有一种简单但实用且简单的解决方案。需要注意的是我的代码确实允许使用DataTables data()方法，而且对于那些从行的每个单元格接收HTML代码而不是内部文本的人来说，这更是一种解决方案，而不是试图获取input文本框的值。单击的行通过data()返回一个数组。该行的每个单元格都包裹在span中，因此td中的任何纯文本/非HTML字符串都可以呈现为HTML元素，因此可以通过jQuery text()方法进行识别：< / p>

$('#mytable tbody').on('click', 'tr', function (e) {
   var rowArray = aTable.row(this).data();
   var colAchange = $('<span/>').html(rowArray[0]).text();
   var colBchange = $('<span/>').html(rowArray[1]).text();
});

JSFiddle：https://jsfiddle.net/nyv7j6h8/

获取作为输入文本字段的Datatables单元格值

2 个答案: