Datatable with context menu

rbraman

I am trying to use datatable in conjunction with the context menu from:
http://www.javascripttoolbox.com/libsource.php/contextmenu/source/jquery.contextmenu.js

So far it "works" , but there is a small snag:
The context menu only shows for the rows that are displayed when the datatable is initialized(the first 10), but not for the others (ie on the nextpage)

here is the code:
oResultsTable = $('#tblresults').dataTable({"bSort": false,'sPaginationType': 'full_numbers'});
var menu1 = [ {'View Chart':function(menuItem,menu) { addChart(this); } }, $.contextMenu.separator, {'Add to Chart':function(menuItem,menu) { alert("You clicked Option 2!"); } } ]; $(function() { $('.resultname').contextMenu(menu1,{theme:'vista'}); });

any ideas on how to give all the rows the context menu?

I know i need to change this part { $('.resultname').contextMenu(menu1,{theme:'vista'}); })
and use the fnGetNodes somehow but all my experiments so far have failed.

each row has a classname=resultname

Thanks

Rich

allan

Have a look at the FAQ ( http://datatables.net/faqs ) entitled "Q. My events don't work on the second page". Hopefully that will help.

Allan

touchmenot

DataTable rocks. I had the same issue as mentioned and got it fixed now. This post saved me a lot of debug time as am still learning jquery.

vasagan

It is very simple to integerate context menu in data table. You need to add below code
"fnInitComplete": function () {
$("#example TR").contextMenu({
menu: 'myMenu'
}, function(action, el, pos) {
alert(
'Action: ' + action + '\n\n' +
'Element text: ' + $(el).attr('id') + '\n\n' +
'X: ' + pos.x + ' Y: ' + pos.y + ' (relative to element)\n\n' +
'X: ' + pos.docX + ' Y: ' + pos.docY+ ' (relative to document)'
);
});



}

befor you need to refer this website

http://www.abeautifulsite.net/blog/2008/09/jquery-context-menu-plugin/

BigBob

I have also tried to use context menu plugin from http://www.abeautifulsite.net/blog/2008/09/jquery-context-menu-plugin/.

For me the pre-init or post-init from FAQ or fnInitComplete suggested by vasagan did not work. What finally did, was placing the .contextMenu() initialization in fnDrawCallback function of DataTable. That way the context menu was bound to all rows after consecutive pages were loaded from server.

[code]
oTable = $('#example').dataTable({
"sDom": '<"H"RlTfr>t<"F"ip>',
"sScrollX": "",
"bAutoWidth": false,
"bJQueryUI": true,
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "ajax.php",
"fnDrawCallback": function( oSettings ) {
$("#example tbody tr").contextMenu({
menu: 'myMenu'},
function( action, el, pos ) {
var aData = oTable.fnGetData( el.context );
});
});

}
});
[/code]

Another point I was struggling with, was trying to get row data of the right-clicked row. Turned out that the 'el' parameter of the contextMenu callback function has the required information in its 'context' property, which can be used to retrieve data from the row with fnGetData (see code above).