如何提取数据表中选定行的数据

n34*_*nda 3 javascript jquery datatables

我初始化了一个简单的数据表:

//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);
Run Code Online (Sandbox Code Playgroud)

它可以包含任意数量的记录,但我想从所有列中获取值(仅向用户显示 1 列)并将它们插入到输入字段中(可能可见也可能不可见)。我已经成功地能够使用以下方法选择行:

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

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

   });
Run Code Online (Sandbox Code Playgroud)

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

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

任何帮助表示赞赏

Gyr*_*com 8

解决方案

使用下面的代码获取所选行的数据:

var data = $('#example').DataTable().row('.selected').data();
Run Code Online (Sandbox Code Playgroud)

然后您可以填充输入字段,如下所示:

$('#name').val(data[0]); 
$('#email').val(data[1]); 
Run Code Online (Sandbox Code Playgroud)

请参阅此 jsFiddle进行演示。

笔记

您可以简化初始化代码:

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