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

问题描述 投票:0回答:1

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

//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
但我没有走得太远,因为它总是通过控制台返回未定义。

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

任何帮助表示赞赏

javascript jquery datatables
1个回答
8
投票

解决方案

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

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
       }
    ]
});
© www.soinside.com 2019 - 2024. All rights reserved.