Question

120

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

rated 0 times [ 121] [ 1] / answers: 1 / hits: 19499 / 8 Years ago, fri, april 1, 2016, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

arthur

Add To Favorites

Follow

Total Points: 729

Total Questions: 107

Total Answers: 109

Location: China

Member since Mon, Aug 22, 2022

2 Years ago

arthur questions

1 Error: Unexpected token (Note that you need plugins to import files that are not JavaScript) rollup vue package

Thu, Sep 2, 21, 00:00, 3 Years ago

1 Formik & Yup: How to validate if the provided date is eighteen years old?

Mon, Oct 19, 20, 00:00, 4 Years ago

1 Angular 9 how to use debouncetime for input change event (keyup)

Thu, Apr 30, 20, 00:00, 4 Years ago

1 Swiper and current page index

Wed, Feb 19, 20, 00:00, 4 Years ago

1 Google Maps API Billing not Enabled Error - Billing not open

Fri, Jan 10, 20, 00:00, 4 Years ago

View All

answered 8 Years ago emileef · Accepted Answer

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

       }

    ]

});