Access td onclick and do some functionality.

prsd

Hello Everyone,

Thanks for sharing all your knowledge about datatables. It helped me to understand its details.
I have a quick question:

I am trying to access a cell of a datatable. I can access a row and delete it using:

$("#example td").live('click', function(event) {
var row = $(this).closest("tr").get(0);
oTable.fnDeleteRow( row );
});

Above code gives me a row when I click on that.

JavaScript Debugger: http://live.datatables.net/uzahod/2/edit#javascript,html

Can you please tell me, how can I click on a single cell of datatable row and then do further functionality. I have a delete image in that cell. Once someone clicks on that delete image and in that row, then the current row will get deleted. Similarly, I have an edit button in another cell - on that cell on clickevent, I am planing to write a functionality to edit other cells values from the same row.

I am looking for some code as above which will allow me to select onclick even once particular cell is clicked. My generated databale is here:






Some String Value
2012-07-03 22:20:00.0











Some String Value2
2012-07-03 22:22:10.0











Some String Value3
2012-07-03 18:21:00.0
















Also, I am not sure, how can I assign "id" to any "" present for rename, delete and download. I tried this, but this "id" gets assigned to image and also the same id gets assigned to all rows.

var editImage = '';
$('td:eq(2)', nRow).html(editImage);
var deleteImage = '';
$('td:eq(3)', nRow).html(deleteImage);
var downloadImage = '';
$('td:eq(4)', nRow).html(downloadImage);


Please help!

Thanks!

prsd

All right! I can access onclick event from that image using:

$('#example.display tbody tr#0.odd td img').live('click', function(){
alert("I am clicked");
});
But now issue is: "tr#0" I am checking now, if above block can be generalized and can be used for all images present for all datatable rows.

Thanks!

prsd

Sorry everyone but I am posting as I am progressing.

$('#example.display tbody tr td img#delete').live('click', function(){
alert("I am clicked");
});

Ok at this point of time, this way I can make the block generalized. I will post if I need anything.

Thanks Everyone!

jcready

[code]$('#myTable').on('click', 'td', function(event) {
if ($(this).find('#delete').length > 0) {
$('#myTable').fnDeleteRow(this.parentNode);
}
});[/code]

prsd

Thanks jcready!

That block looks great. However I am getting error:

$("#example").fnDeleteRow is not a function

jcready

You probably shouldn't initialize that block of code until after you've run $('#example').dataTable(). I would also recommend storing your dataTable reference to a variable.

[code]var oTable = $("#example").dataTable();

oTable.on('click', 'td', function(event) {
if ($(this).find('#delete').length > 0) {
oTable.fnDeleteRow(this.parentNode);
}
});[/code]

prsd

Thanks jcready! I was using that block after initializing the table. But somehow I was getting that error. Anyways thanks so much for your inputs!

Thanks!

prsd

Okay! Need some help on this. I am clicking on a delete image which is present in one of the cell of one of the row. Once I click the delete image there should be a modal confirmation box asking user to confirm the row delete. Well, the functionality is working but the modal confirmation box does not show up on first click on delete image - but shows up on second click. I wrote console.log when image gets clicked - it logs every time that images is clicked - But the confirmation box does not show up first time. Without the confirmation box logic, if I click on delete image the row gets deleted on first click only.

Here is the code:
[code]
$('#example.display tbody tr td img#delete').live('click', function(){
console.log("Delete clicked");

var oTable = $('#example').dataTable();
var nRow = $(this).closest("tr").get(0);
var aData = oTable.fnGetData(nRow);

("#DeleteConfirmationModalWindow").html(''+'Are you sure you wish to delete order:'+'
'+aData[0]+'?'+'');
$("#DeleteConfirmationModalWindow").dialog('open');

$("#DeleteConfirmationModalWindow").dialog({
title: "Delete Confirmation",
autoOpen: false,
dialogClass: "DeleteConfirmationModalWindow",
closeOnEscape: false,
draggable: false,
width: 400,
height: 200,
modal: true,
buttons: {
"Yes, I'm sure": function() {
$( this ).dialog( "close" );
console.log("Delete");
deleteDatabaseRow(oTable, nRow);
oTable.fnDeleteRow(nRow);
},
Cancel: function() {
$( this ).dialog( "close" );
console.log("No delete");
}
},
resizable: false,
open: function() {
$('body').css('overflow','hidden');
},
close: function() {
$('body').css('overflow','auto');
}
});
});
[/code]
Thanks!

prsd

Sorry initially posted comment which was not related to this post.

Thanks!

prsd

Please help me on this as well. Thanks!

prsd

This is also resolved. You may mark this as closed. Thanks!