Probably I will get down votes for this question but. here it goes.
I am using datatables. Is it possible to show working edit and delete buttons on right click like the example here? I am not good at jquery. I would appreciate if anyone can send a sample. The only working example I found is this. But it is not what I am trying to achieve.
Example for click events: https://datatables.net/examples/advanced_init/events_live.html
Here is the modification of the javascript used in your first example:
$(document).ready( function () {
var oTable = $('#example').dataTable({
"bJQueryUI": true,
"sDom": 'l<"H"Rf>t<"F"ip>'
});
$(document).contextmenu({
delegate: ".dataTable td",
menu: [
{title: "Delete", cmd: "delete"},
{title: "Edit", cmd: "edit"}
],
select: function(event, ui) {
switch(ui.cmd){
case "delete":
$(ui.target).parent().remove();
break;
case "edit":
$(ui.target).html(
$('<input type="text"/>').val(
$(ui.target).text()
).bind( "keypress focusout",function (e) {
if (e.type=="keypress"?(e.keyCode ==13?true:false):true) {
$(this).parent().html(
$(this).val()
);
}
})
);
break;
}
},
beforeOpen: function(event, ui) {
var $menu = ui.menu,
$target = ui.target
ui.menu.zIndex(0);
}
});
} );
The working example has been posted here:
You could init the contextmenu in the drawCallback handler, and retrieve the id from the clicked row in $.contextMenu's own callback :
drawCallback : function() {
$.contextMenu({
selector: 'tbody tr td',
callback: function(key, options) {
var id = options.$trigger[0].parentElement.id;
var m = "clicked: " + key + ' ' + id;
window.console && console.log(m) || alert(m);
/*
switch (key) {
case 'delete' :
yourDeleteMethod(id); break;
case 'edit' :
yourEditMethod(id); break;
...
}
*/
},
items: {
"edit": {name: "Edit", icon: "edit"},
"cut": {name: "Cut", icon: "cut"},
copy: {name: "Copy", icon: "copy"},
"paste": {name: "Paste", icon: "paste"},
"delete": {name: "Delete", icon: "delete"},
"sep1": "---------",
"quit": {name: "Quit", icon: function(){
return 'context-menu-icon context-menu-icon-quit';
}}
}
});
},
updated fiddle -> http://jsfiddle.net/0f9Ljfjr/900/
Since the selector is set to tbody tr td the id will always could be found by options.$trigger[0].parentElement.id. Now you just need to respond to what ever actions you need, and call your own methods with the retrieved id.