How to simply read index ( row, col and the value) of a cell clicked?

GeasLu

Good morning,
sorry for the stupid question, but I'm beginner and I can't understand this simply case.

I need to listen when fire the event 'click', and also i need to know the row, col of the cell clicked.

I load my data from an JSON array and initialize my datatable like this:

$('#' + pIdDataTable).DataTable({

destroy: true,

responsive: true,

data : elnEventi,

dataSrc : "eventi",

columns: [. ...... ]

there are columDef and other very long options.

Thank you at All!

allan

Change $('#' + pIdDataTable).DataTable({
 to be:

var table = $('#' + pIdDataTable).DataTable({
`

so you have access to the DataTables API instance.

Then you can do:

$('#' + pIdDataTable).on(‘click’, ‘tbody td’, function () {
  var cellIndex = table.cell(this).index();
  var rowData = table.row(this).data();
  // ... etc
});

See also this example which also discusses this.

Allan

GeasLu

Thank you Allan!

Now I have to check if the column clicked is a particular column

for example:
if ( column.data == 'modify') { .... }

How can i do this?

Really thanks!

kthorngren

The cell().index() used above provides the row and column index clicked. You can get it with cellIndex.column.

Kevin

GeasLu

Thank you Kevin,
but in cellIndex.column there's the number of the column i need to read the property "data"

when init my datatable I have inserted a column like :

dtb = $('#' + pIdDataTable).DataTable({

destroy: true,

responsive: true,

data : elnEventi,

dataSrc : "eventi",

selectType : "cell",

columns: [

{
 data: "idRow",

title : 'idRow',

visible : false

},

{
data: "MODIFY", <------------------------- I need to read this
title : 'mod',
visible : true

},

...

thank you so much!

kthorngren

Sorry, thought you wanted the column index. The row().data() PI returns the row data in the object structure you defined. you can use this:

var rowData = table.row(this).data();
var modify = rowData.modify;

Kevin

GeasLu

Ok thx!

and if i want to know if the column clicked is MODIFY or another?

For example if i click the column modify I do something if I click tyo another column i do something else.

Really thx!

kthorngren

I don't think there is an easy way to determine the data: "MODIFY config. Some options are to use the index as I mentioned above.

Or you can get the column header name using api column().header() but its not the same as what you are asking for. See the example in the docs of how to use it.

Or you can add a class to the MODIFY column and check for the class using cell().node().

You

GeasLu

You are grate!

Here my code:

$('#' + pIdDataTable).on('click', 'tbody td', function () {

alert('click');
var cellIndex = dtb.cell(this).index();

var rowData = dtb.row(this).data();


var colInd = cellIndex.column;



if (dtb.column(colInd).header().textContent == 'Mod.'){

 alert('Modify');

}

});

Solved! thx very much!