獲取作為輸入文本字段的 Datatables 單元格值

Question

我正在生成一個帶有 javascript 數據源的 DataTable。 數據從對 nodejs 的 ajax 調用返回，該調用查詢 SQL Server DB 表並返回 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 變量都只有 'input type="text" ...' html 文本，而不是輸入字段的值。 這確實有道理，但我找不到讀取輸入字段值的正確方法。 有一次，我在 Datatables 文檔中讀到，您可以將“元”數據添加到行數據中。 我是否需要這樣做才能在該元素上獲取“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% 復制了你的上述場景 -> http://jsfiddle.net/obmghyo7/

這基本上也是官方文檔如何建議從表單輸入中提取值的方法-> https://datatables.net/examples/api/form.html

如果您想在表中執行過濾/搜索，其中還包括用戶在表單輸入中所做的更改，那么它有點棘手 - > JQuery Datatables 在輸入和選擇中搜索（我的，但我不知道任何更好的答案)

Answer 2

我有一種駭人聽聞但適用且簡單的解決方案。 需要注意的是我的代碼確實允許使用 DataTables data()方法，而且對於任何接收 HTML 代碼而不是從一行的每個單元格接收內部文本的人來說，這更像是一種解決方案，而不是嘗試獲取值一個input文本框。 單擊的行通過data()返回一個數組。 該行的每個單元格都包含在一個span因此td任何純文本/非 HTML 字符串都可以呈現為 HTML 元素，因此可以被 jQuery text()方法識別：

$('#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/