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

时间：2022-12-09 14:29:35

I have initialised a simple Datatable:

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

//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);

It can contain any number of records but I would like to take the values from all of the columns (only 1 is displayed to the user) and insert them into input fields (which may or may not be visible). I have successfully been able to select the rows using:

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

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

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

   });

I have been looking into the Datatables API, row(), cells() etc and whilst I can view the data() method I simply can't see how to extract data from EACH cell on the row into the input text fields on the same webpage. I have also looked at fnGetSelectedData but I didn't get far as it always returned undefined via the console.

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

To explain the use case, it's essentially an Address Lookup. Each column in the table represents part of the address, I want to take the cells from the selected row and insert it into the form as a users selected address.

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

Any help is appreciated

任何帮助表示赞赏

1 个解决方案

#1

2  

SOLUTION

Use the code below to get data for the selected row:

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

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

Then you can populate your input fields as shown below:

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

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

See this jsFiddle for demonstration.

请参阅此jsFiddle进行演示。

NOTES

You can simplify your initialization code:

您可以简化初始化代码:

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

#1

2  

SOLUTION

Use the code below to get data for the selected row:

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

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

Then you can populate your input fields as shown below:

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

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

See this jsFiddle for demonstration.

请参阅此jsFiddle进行演示。

NOTES

You can simplify your initialization code:

您可以简化初始化代码:

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

相关文章