Click on item (icon) in last column and getting access to that row cell values

Click on item (icon) in last column and getting access to that row cell values

uskerineuskerine Posts: 33Questions: 15Answers: 0

Hi,

I have a table loaded with AJAX with its two first columns loaded with ID and FOONAME.

A third column has been hardcoded with "defaultContent" and includes an item of class ".action-view"

I am trying to create a handler that will get the ID when user clicks on that item of class .action-view.

$('#myTable').on('click','.action-view',function() {


}

What should I use to get the ID column in the same row of the clicked item .action-view?

Thanks,

This question has an accepted answers - jump to answer

Answers

  • rhinorhino Posts: 80Questions: 2Answers: 17
    edited July 2014
    var tableApi = $('#myTable').DataTable();
    $('#myTable').on('click','.action-view',function() {
        var ID = tableApi.row($(this).parents('tr').first()).data()[0];
    });
    

    See if that'll work for ya

  • uskerineuskerine Posts: 33Questions: 15Answers: 0

    Unfortunatelly, it does not work.

    var oMyTable = $('#myTable').dataTable({
      "ajax": {      },
      "columnDefs": [ . . ],
      "columns": [ . .. ]
    });
    
    var apiMyTable = $('#myTable').DataTable();
    $('#myTable').on('click','.action-view',function() {
        var ID = tableApi.row($(this).parents('tr').first()).data()[0];
    });
    

    shows nothing, even when data is loaded.

    Could it be because my .dataTable definition instead of .DataTable?
    Is there anyway to match both?

    Thanks,

  • rhinorhino Posts: 80Questions: 2Answers: 17
    edited July 2014

    On line 1 of the second snippet, you've called it var apiMyTable, but on line 3 of that snippet, you've called it tableApi

    Make those two match and see if it works?

  • uskerineuskerine Posts: 33Questions: 15Answers: 0

    You are right, my post used different keywords for the variable but it was correctly typed in my real code (just a typo in the post).

    It does not work. I will try to prepare a fiddle.

  • uskerineuskerine Posts: 33Questions: 15Answers: 0

    The solution rhino has provided WORKS if your data is loaded as an array.
    But when data is loaded as object, it does not.

    Here you can see how you get "undefined":
    http://jsfiddle.net/uwAL4/1/

    In this case I am using an object , as data is actually retrieved via AJAX from a server, where I can easily generate a JSON object but not so easily a data array.

    Is there any way to fix that so you can get other values even when dealing with objects?
    I am sure I am missing something about how to deal with this.

    Thanks!

  • uskerineuskerine Posts: 33Questions: 15Answers: 0
    edited July 2014

    So:

    It works with DATA ARRAYS:

    http://jsfiddle.net/9XpM2/1/

    But IT DOES NOT with OBJECTS:

    http://jsfiddle.net/uwAL4/1/

  • uskerineuskerine Posts: 33Questions: 15Answers: 0
    edited July 2014

    .

  • rhinorhino Posts: 80Questions: 2Answers: 17
    edited July 2014 Answer ✓

    Ah!

    Just change the [0] to .id (working demo)

    :)

        ID = myTableApi.row($(this).parents('tr').first()).data().id;
    
  • uskerineuskerine Posts: 33Questions: 15Answers: 0

    Thanks!!!

This discussion has been closed.