How to get ID of dataTable on row click

Question

I have this code:

   $('#example').dataTable({
                "ajax": "getN.php",
                paging: false,

                "columns": [{
                        "data": "ID"
                    }, {
                        "data": "naziv"
                    }, {
                        "data": "ha"
                    },
                    {
                        "data": "ar"
                    },
                    {
                        "data": "m2"
                    },
                    {
                        "data": "lokacija"
                    },
                    {
                        "data": "osnov"
                    },
                    {
                        "data": "kat_kul"
                    },
                    {
                        "data": "akcija"
                    }
                ],
                "columnDefs": [
                        {
                    "targets": 8,
                    "data": "akcija",
                    "render": function(data, type, full, meta) {
                        // return data; 
                        return '<div style="float:right;"><button class="btn btn-warning">Izmeni</button> <button class="btn btn-info openDelete" data-toggle="modal" data-target="#delete">Izvestaj o parceli</button> <i  id="openDelete" data-toggle="modal" data-target="#delete" class="fa fa-times openDelete"></i></div>';
                    }
                },
                        {
                    "targets": 0,
                    "visible":false
                        }
]
            });

my getN.php generate this code:

{"data":[{"ID":"3","0":"3","naziv":"Vocnjak N","1":"Vocnjak N","ha":"1","2":"1","ar":"1","3":"1","m2":"57","4":"57","lokacija":"iznad brdo","5":"iznad brdo","osnov":"zakup zemlje","6":"zakup zemlje","kat_kul":"vocnjak","7":"vocnjak"},{"ID":"27","0":"27","naziv":"test","1":"test","ha":"2","2":"2","ar":"2","3":"2","m2":"0","4":"0","lokacija":"1 p","5":"1 p","osnov":"komesacija","6":"komesacija","kat_kul":"vinograd","7":"vinograd"},{"ID":"82","0":"82","naziv":"sdf","1":"sdf","ha":"0","2":"0","ar":"2","3":"2","m2":"0","4":"0","lokacija":"","5":"","osnov":"vlasnistvo","6":"vlasnistvo","kat_kul":"njiva","7":"njiva"},{"ID":"81","0":"81","naziv":"mm","1":"mm","ha":"7","2":"7","ar":"7","3":"7","m2":"7","4":"7","lokacija":"NS","5":"NS","osnov":"vlasnistvo","6":"vlasnistvo","kat_kul":"njiva","7":"njiva"},{"ID":"70","0":"70","naziv":"Moja parcela 2","1":"Moja parcela 2","ha":"3","2":"3","ar":"2","3":"2","m2":"3","4":"3","lokacija":"subotica","5":"subotica","osnov":"vlasnistvo","6":"vlasnistvo","kat_kul":"vinograd","7":"vinograd"},{"ID":"80","0":"80","naziv":"ss","1":"ss","ha":"1","2":"1","ar":"4","3":"4","m2":"4","4":"4","lokacija":"Pancevo","5":"Pancevo","osnov":"vlasnistvo","6":"vlasnistvo","kat_kul":"ribnjak","7":"ribnjak"},{"ID":"94","0":"94","naziv":"minus","1":"minus","ha":"3","2":"3","ar":"3","3":"3","m2":"3","4":"3","lokacija":"","5":"","osnov":"vlasnistvo","6":"vlasnistvo","kat_kul":"njiva","7":"njiva"},{"ID":"95","0":"95","naziv":"asd","1":"asd","ha":"2","2":"2","ar":"2","3":"2","m2":"2","4":"2","lokacija":"asdasd","5":"asdasd","osnov":"ustupljeno na koriscenje","6":"ustupljeno na koriscenje","kat_kul":"njiva","7":"njiva"},{"ID":"120","0":"120","naziv":"pera","1":"pera","ha":"32","2":"32","ar":"0","3":"0","m2":"0","4":"0","lokacija":"23","5":"23","osnov":"zakup zemlje","6":"zakup zemlje","kat_kul":"njiva","7":"njiva"},{"ID":"122","0":"122","naziv":"TESTiranje add","1":"TESTiranje add","ha":"2","2":"2","ar":"3","3":"3","m2":"2","4":"2","lokacija":"sdfsdf","5":"sdfsdf","osnov":"vlasnistvo","6":"vlasnistvo","kat_kul":"njiva","7":"njiva"},{"ID":"123","0":"123","naziv":"asd","1":"asd","ha":"3","2":"3","ar":"4","3":"4","m2":"3","4":"3","lokacija":"","5":"","osnov":"vlasnistvo","6":"vlasnistvo","kat_kul":"njiva","7":"njiva"},{"ID":"124","0":"124","naziv":"asd","1":"asd","ha":"3","2":"3","ar":"4","3":"4","m2":"3","4":"3","lokacija":"","5":"","osnov":"vlasnistvo","6":"vlasnistvo","kat_kul":"njiva","7":"njiva"},{"ID":"125","0":"125","naziv":"YESSSS","1":"YESSSS","ha":"0","2":"0","ar":"9","3":"9","m2":"5","4":"5","lokacija":"nema","5":"nema","osnov":"vlasnistvo","6":"vlasnistvo","kat_kul":"vocnjak","7":"vocnjak"},{"ID":"126","0":"126","naziv":"nn","1":"nn","ha":"2","2":"2","ar":"2","3":"2","m2":"2","4":"2","lokacija":"","5":"","osnov":"vlasnistvo","6":"vlasnistvo","kat_kul":"njiva","7":"njiva"},{"ID":"127","0":"127","naziv":"aaa","1":"aaa","ha":"3","2":"3","ar":"3","3":"3","m2":"3","4":"3","lokacija":"","5":"","osnov":"vlasnistvo","6":"vlasnistvo","kat_kul":"njiva","7":"njiva"},{"ID":"128","0":"128","naziv":"bbb","1":"bbb","ha":"2","2":"2","ar":"2","3":"2","m2":"2","4":"2","lokacija":"","5":"","osnov":"vlasnistvo","6":"vlasnistvo","kat_kul":"njiva","7":"njiva"},{"ID":"129","0":"129","naziv":"gg","1":"gg","ha":"4","2":"4","ar":"4","3":"4","m2":"4","4":"4","lokacija":"","5":"","osnov":"vlasnistvo","6":"vlasnistvo","kat_kul":"njiva","7":"njiva"},{"ID":"130","0":"130","naziv":"fff","1":"fff","ha":"3","2":"3","ar":"3","3":"3","m2":"3","4":"3","lokacija":"","5":"","osnov":"vlasnistvo","6":"vlasnistvo","kat_kul":"njiva","7":"njiva"},{"ID":"131","0":"131","naziv":"www","1":"www","ha":"2","2":"2","ar":"2","3":"2","m2":"3","4":"3","lokacija":"","5":"","osnov":"vlasnistvo","6":"vlasnistvo","kat_kul":"njiva","7":"njiva"},{"ID":"132","0":"132","naziv":"uuuu","1":"uuuu","ha":"4","2":"4","ar":"4","3":"4","m2":"4","4":"4","lokacija":"","5":"","osnov":"vlasnistvo","6":"vlasnistvo","kat_kul":"njiva","7":"njiva"},{"ID":"133","0":"133","naziv":"qqq","1":"qqq","ha":"5","2":"5","ar":"5","3":"5","m2":"5","4":"5","lokacija":"","5":"","osnov":"vlasnistvo","6":"vlasnistvo","kat_kul":"njiva","7":"njiva"},{"ID":"134","0":"134","naziv":"kkk","1":"kkk","ha":"8","2":"8","ar":"8","3":"8","m2":"8","4":"8","lokacija":"","5":"","osnov":"vlasnistvo","6":"vlasnistvo","kat_kul":"njiva","7":"njiva"},{"ID":"135","0":"135","naziv":"ooo","1":"ooo","ha":"9","2":"9","ar":"9","3":"9","m2":"9","4":"9","lokacija":"","5":"","osnov":"vlasnistvo","6":"vlasnistvo","kat_kul":"njiva","7":"njiva"},{"ID":"136","0":"136","naziv":"ppp","1":"ppp","ha":"5","2":"5","ar":"6","3":"6","m2":"5","4":"5","lokacija":"","5":"","osnov":"vlasnistvo","6":"vlasnistvo","kat_kul":"njiva","7":"njiva"}]}

so as you can see I hide first column in my datatable and that value is (ID) in my database... but now I need a way to get it. How?

I need to get data from 1. column of clicked row - to get ID, becouse I need then to update data in database and I need ID of clicked row. Any ideas?

Also how I can access all values from clicked row ? etc.

just idea: clickedRow.data.Id, clickedRow.data.naziv etc. ... Is there any way?

Answer 1

I solve on this way:

var oTable =  $('#example'). dataTable();
$('#example').on('click', 'tr', function(){
    var oData = oTable.fnGetData(this);
    console.log(oData.ID);
});

Answer 2

You can use the following code:

var $el = $('#example');
var oTable = $el.dataTable({
    // options
});

$el.on('click', '.openDelete', function() {
    var row = $(this).closest('tr')[0];
    var rowData = oTable.row(row).data();
    if (rowData) {
        var rowId = rowData.ID;

        // Use your rowId value the way you like
    }
});

This solution does not read the ID from the DOM (as in mattfetz's answer) but instead retrieves the original data item by using the dataTable .data() method. This is probably more reliable and less dependent on implementation.

Answer 3

Here's a simple example you could go off from

http://jsfiddle.net/zy65agrt/2/

Html

<table id="tableId">
    <tr>
        <td>
            1
        </td>
        <td>
            <button class="row-button" >show Id</button>
        </td>
    </tr>
    <tr>
        <td>
            2
        </td>
        <td>
            <button class="row-button" >show Id</button>
        </td>
    </tr>
</table>

Jquery

$(document).ready(function(){

    $("#tableId button").click(function(){

        var trElem = $(this).closest("tr");// grabs the button's parent tr element
        var firstTd = $(trElem).children("td")[0]; //takes the first td which would have your Id
        alert($(firstTd).text())
    })

})

When a row is clicked it will find the parent tr and then you can grab the td in that row that has your Id.