如何在 Datatables 上提取选定行的数据答案

【问题标题】：How can I extract a selected row's data on Datatables如何在 Datatables 上提取选定行的数据
【发布时间】：2016-04-01 15:59:40
【问题描述】：

我已经初始化了一个简单的数据表：

//initialise table
var dataTable = $('#example').DataTable({
    searching: false,
    responsive: true

});
//hide unnecessary columns
dataTable.columns(1).visible(false);
dataTable.columns(2).visible(false);
dataTable.columns(3).visible(false);
dataTable.columns(4).visible(false);
dataTable.columns(5).visible(false);
dataTable.columns(6).visible(false);
dataTable.columns(7).visible(false);
dataTable.columns(8).visible(false);

它可以包含任意数量的记录，但我想从所有列中获取值（仅向用户显示 1 个）并将它们插入输入字段（可能可见也可能不可见）。我已经成功地选择了行：

$('#example tbody').on( 'click', 'tr', function () {

       if ( $(this).hasClass('selected') ) {
           $(this).removeClass('selected');
       }
       else {
           dataTable.$('tr.selected').removeClass('selected');
           $(this).addClass('selected');
       }

   });

我一直在研究 Datatables API、row()、cells() 等，虽然我可以查看 data() 方法，但我根本看不到如何从行上的每个单元格中提取数据到输入文本中同一网页上的字段。我也看过fnGetSelectedData，但我没有走远，因为它总是通过控制台返回 undefined。

为了解释用例，它本质上是一个地址查找。表格中的每一列代表地址的一部分，我想从所选行中取出单元格并将其作为用户选择的地址插入到表单中。

感谢任何帮助

【问题讨论】：

我不明白你的问题。 rows().data() 和 row().data() 是这样做的正确方法。它们都返回按列排序的数组，并且应该很容易使用它，对吧？
所以在点击函数中，我应该使用 row().data() 返回数据？本质上，我希望能够抓取选定行上的所有单元格并将其插入到文本字段中。我是一个新手，感谢您的帮助。
是的，row().data() 就是你的做法。 Gyrocode 的回答不止于此。

标签： javascript jquery datatables

【解决方案1】：

解决方案

使用以下代码获取所选行的数据：

var data = $('#example').DataTable().row('.selected').data();

然后您可以填充您的输入字段，如下所示：

$('#name').val(data[0]); 
$('#email').val(data[1]);

请参阅this jsFiddle 进行演示。

注意事项

您可以简化初始化代码：

var dataTable = $('#example').DataTable({
    searching: false,
    responsive: true
    columnDefs: [
       {
          targets: [1,2,3,4,5,6,7,8],
          visible: false
       }
    ]
});

【讨论】：

感谢您的注释，这很有效，而且更容易。我也尝试过该解决方案，但是当我像数据 [1] 一样引用它时，它报告“数据”未定义。有点新手，所以我很感激帮助。我被指向这个 API 页面，但努力让它工作：datatables.net/extensions/select/integration
@n34_panda，因为您没有使用 Select 扩展，所以该链接不适用于您。如果您使用 Select 扩展，请参阅this example。我还添加了一个简单的demo 来演示代码。
是的，完美 - 我不知道我为什么在 30 分钟前挣扎。我有一台不同的电脑，它第一次工作。非常感谢您提供的详细信息、解释和帮助。

【解决方案2】：

要获取具有值的对象，请使用：

yourTableVariable.rows({ selected: true }).data();

然后您可以执行以下操作来获取特定值（示例 id）：

yourTableVariable.rows({ selected: true }).data()[0].id;

【讨论】：