How to get values from DataTables row?

Question

I want to get values of a row in DataTables when a click on the button corresponding to this row, but when using this code i get undefined:

The buttons are being added like this:

function getdata()
    {
     $pdrs = Pdrs::select('ID_Piece', 'Designation', 'Status');
     $result = DataTables::of($pdrs)
            ...
            ->addColumn('action', function($pdr){
            return '<a href="#" class="btn btn-xs btn-primary Ajouter_au_panier" id="'.$pdr->ID_Piece.'"><i class="glyphicon glyphicon-shopping-cart"></i> Ajouter au panier</a>';})
        ->make(true);   
    return $result ;
    }

the trigger is:

$(document).on('click', '.Ajouter_au_panier', function(){
    var table = $('#pdr_table').DataTable();
    console.log( table.row( this ).data() );  
});

What is this? We need to see much more of your code in order to help you. — Rory McCrossan
– Rory McCrossan, Commented Feb 7, 2019 at 8:00

lofihelsinki · Accepted Answer · 2019-02-07 09:38:48Z

3

If you put the trigger in the <a> tag inside the cell, you need to reference the parent cell instead of the <a>.

$(document).on('click', '.Ajouter_au_panier', function(e){
    var table = $('#pdr_table').DataTable();
    console.log( table.row( $(this).closest("td") ).data() );  
});

UPDATE / EDITED: To get the contents of a specific column, use the cells() function with the row and column as params in an object. I.e. for column 2:

$(document).on('click', '.Ajouter_au_panier', function(e){
    var table = $('#pdr_table').DataTable();
    var rowId = table.row( $(this).closest("td") ).index();
    console.log( table.cells({ row: rowId, column: 2 }).data()[0] );  
});

UPDATE 2 / EDITED: If you want to get the contents of the same column where the link was clicked, you can do it like this:

$(document).on('click', '.Ajouter_au_panier', function(e){
    var table = $('#pdr_table').DataTable();
    var rowId = table.row( $(this).closest("td") ).index();
    var colId = table.column( $(this).closest("td") ).index();
    console.log( table.cells({ row: rowId, column: colId }).data()[0] );  
});

edited Feb 7, 2019 at 9:38

answered Feb 7, 2019 at 8:53

lofihelsinki

2,5812 gold badges29 silver badges39 bronze badges

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

5 Comments

Sami Over a year ago

Yes, thank you this is working, how do i filter this to get only the value of a specific column?

Sami Over a year ago

I get undefined when doing console.log( table.row( $(this).closest("td") ).data()[2] );

lofihelsinki Over a year ago

Do you have 3 columns and data in the 3rd column? Btw. it's good practice to approve the answer when the original question has been answered, not after asking more questions.

Sami Over a year ago

Yes i have that's the result when doing only data()

{ID_Piece: "2", Designation: "Ecran", Status: "Indisponible", checkbox: "<input type="checkbox" name="pdr_checkbox[]" class="pdr_checkbox" value="2" />", action: "<a href="#" class="btn btn-xs btn-primary Ajouter_…yphicon-shopping-cart"></i> Ajouter au panier</a>"}

Sami Over a year ago

undefined is the result.

Collectives™ on Stack Overflow

How to get values from DataTables row?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related