I am trying to add a right click context menu for each row in a table. I'll need to pull the data from the clicked row after selecting an action in the context menu, but I can't even get the context menu to appear. If I change the selector when intializing the table to '#example tbody' I can get the menu to appear but that won't work for this scenario.
The rest of the table is working perfectly. Per some of the posts in this forum I've tried adding the contextmenu code to the fnDrawCallback section and to the fnRowCallback section, but when I do the table data fails to load (it sticks on Loading ...).
This is an ASP page and I'm getting JSON data from AJAX calls to static web methods (C#). I'm using the contextmenu plugin from this site (I had to download it from the archives):
http://labs.abeautifulsite.net/archived/jquery-contextMenu/demo/
At the moment I can't run the debugger on the table because the table is pulling sensitive customer data. I also can't link to an external site because the site and data are isolated. If needed, I can create a temporary dataset and post to jsFiddle but I'm hoping I'm missing something easy. Any help would be greatly appreciated.
This is the HTML table for the context menu:
Here is the code for my table:
Here is how I'm initializing my table:
The rest of the table is working perfectly. Per some of the posts in this forum I've tried adding the contextmenu code to the fnDrawCallback section and to the fnRowCallback section, but when I do the table data fails to load (it sticks on Loading ...).
This is an ASP page and I'm getting JSON data from AJAX calls to static web methods (C#). I'm using the contextmenu plugin from this site (I had to download it from the archives):
http://labs.abeautifulsite.net/archived/jquery-contextMenu/demo/
At the moment I can't run the debugger on the table because the table is pulling sensitive customer data. I also can't link to an external site because the site and data are isolated. If needed, I can create a temporary dataset and post to jsFiddle but I'm hoping I'm missing something easy. Any help would be greatly appreciated.
This is the HTML table for the context menu:
<ul id="myMenu" class="contextMenu"> <li class="edit"><a href="#">Edit</a></li> <li class="cut separator"><a href="#">Cut</a></li> <li class="copy"><a href="#">Copy</a></li> <li class="paste"><a href="#">Paste</a></li> <li class="delete"><a href="#">Delete</a></li> </ul>
Here is the code for my table:
<table id="example" style="font-size: .8em; width: 100%;"> <thead> <tr> <th>A1</th> <!-- 0 --> <th>A2</th> <!-- 1 --> <th>A3</th> <!-- 2 --> <th>A4</th> <!-- 3 --> <th>A5</th> <!-- 4 --> <th>A6</th> <!-- 5 --> <th>A7</th> <!-- 6 --> <th>A8</th> <!-- 7 --> <th style="width: 100px;">A8</th> <!-- 8 --> <th>A9</th> <!-- 9 --> <th>A10</th> <!-- 10 --> <th>A11</th> <!-- 11 --> <th>A12</th> <!-- 12 --> <th>A13</th> <!-- 13 --> <th>A14</th> <!-- 14 --> <th>A15</th> <!-- 15 --> <th>A16</th> <!-- 16 --> <th>A17</th> <!-- 17 --> <th>A18</th> <!-- 18 --> </tr> </thead> <tbody> </tbody> </table>
Here is how I'm initializing my table:
$('#example').dataTable({ "bPaginate": false, "bLengthChange": false, "bFilter": true, "bSort": true, "bInfo": false, "bAutoWidth": false, "bJQueryUI": true, "sDom": 'C<"clear">lfrtip', "oColVis": { "sAlign": "right", "buttonText": "View / Hide Columns", "bRestore": true, "iOverlayFade": 100, "sRestore": "Restore" }, "aoColumnDefs": [ { "aTargets": [0], "bVisible": false }, { "aTargets": [2], "bVisible": false }, { "aTargets": [3], "bVisible": false }, { "aTargets": [4], "bVisible": false }, { "aTargets": [5], "bVisible": false }, { "aTargets": [6], "bVisible": false }, { "aTargets": [9], "bVisible": false }, { "aTargets": [10], "bVisible": false }, { "aTargets": [11], "bVisible": false }, { "aTargets": [14], "bVisible": false }, { "aTargets": [15], "bVisible": false }, { "aTargets": [16], "bVisible": false }, { "aTargets": [17], "bVisible": false }, { "aTargets": [18], "bVisible": false } ], "sAjaxSource": "default.aspx/jsonData", "fnServerData": function (sSource, aoData, fnCallback) { $.ajax({ dataType: 'json', contentType: "application/json; charset=utf-8", type: "Get", url: sSource, data: aoData, success: function (msg) { var json = jQuery.parseJSON(msg.d); fnCallback(json); } }); }, "fnDrawCallback": function (oSettings) { $('table#example tr').bind('mouseenter', function () { $(this).addClass('datatablerowhighlight'); }); $('table#example tr').bind('mouseleave', function () { $(this).removeClass('datatablerowhighlight'); }); }, "fnInitComplete": function ( oSettings ) { $('#example tbody 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)' ); }); } });