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

时间:2016-04-01 15:59:41

标签: 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);

它可以包含任意数量的记录,但我想从所有列中获取值(只向用户显示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()方法,但我根本无法看到如何从EACH单元格中提取数据行进入同一网页上的输入文本字段。我也看了fnGetSelectedData,但我没有走远,因为它总是通过控制台返回undefined。

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

感谢任何帮助

2 个答案:

答案 0 :(得分:2)

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

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 :(得分:0)

要获取具有值的对象,请使用:

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

然后您可以执行以下操作以获取特定值(示例ID):

$(yourTableVariable.rows({ selected: true }).data()).attr("id");