How can I extract a selected row's data on Datatables

Question

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:

$('#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.

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

I don't get your question. rows().data() and row().data() are the right way to do this. They both return arrays ordered by column, and it should be easy to work with that, right? — Akshat Mahajan
– Akshat Mahajan, Commented Apr 1, 2016 at 16:03
So within the click function, I should be using row().data() to return the data? Essentially I want to be able to grab all of the cells on a selected row and insert it into a text field. I am a bit of a newbie and appreciate the help. — n34_panda
– n34_panda, Commented Apr 1, 2016 at 16:20
Yes, row().data() is how you do it. Gyrocode's answer more than covers it. — Akshat Mahajan
– Akshat Mahajan, Commented Apr 1, 2016 at 16:27

Community · Accepted Answer · 2020-06-20 09:12:55Z

8

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.

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
       }
    ]
});

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Apr 1, 2016 at 16:02

Gyrocode.com

59k16 gold badges157 silver badges192 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

n34_panda Over a year ago

Thanks for the notes, that has worked a treat and it is easier. I have also tried the solution but it reports "data" is undefined when I reference it like data[1]. Bit of a newbie so I appreciate the help. I was pointed to this API page but struggling to get it working: datatables.net/extensions/select/integration

Gyrocode.com Over a year ago

@n34_panda, since you're not using Select extension the link doesn't apply to you. If you use Select extension, see this example. I also added a simple demo to demonstrate the code.

n34_panda Over a year ago

Yup, perfect - I don't know why I struggled 30 mins ago. I have got to a different PC and it worked first time. Really appreciate the detail, explanation and fiddle for the help.

Zoe - Save the data dump · Accepted Answer · 2024-05-13 19:43:42Z

2

To get an object with the values use:

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

Then you can do something like this to get specific value(example id):

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

edited May 13, 2024 at 19:43

Zoe - Save the data dump

28.4k22 gold badges130 silver badges163 bronze badges

answered Nov 27, 2020 at 20:04

user8604852

78011 silver badges18 bronze badges

Collectives™ on Stack Overflow

How can I extract a selected row's data on Datatables

2 Answers 2

SOLUTION

NOTES

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

SOLUTION

NOTES

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related