контекстное меню jquery datatable не отображается

Question

Я использую следующее из datatables.net, чтобы отобразить контекстное меню по правому щелчку строки таблицы. По умолчанию функция веб-страницы отключилась после добавления этого кода, но контекстное меню не появилось. Что не так?

"fnDrawCallback": function() { 
      $('#example tr').on('mouseenter', function() {  
       $(this).contextMenu({ 
        menu: 'productionRightClickMenu' 
       }, 
      function (action, el, pos) { 
       alert("hi");   
      }); 
      }); 
     } 

обычное контекстное меню, которое я использую на сетках не работает после того, как я использовал обработку на стороне сервера для DataTable. (По использованию контекста обработки на стороне клиента меню работает со следующим кодом.)

//Function for context menu 
(function ($, window) { 

    $.fn.contextMenu = function (settings) { 

     return this.each(function() { 

      // Open context menu 
      $(this).on("contextmenu", function (e) { 
       //open menu 
       $(settings.menuSelector) 
        .data("invokedOn", $(e.target)) 
        .show() 
        .css({ 
         position: "absolute", 
         left: getLeftLocation(e), 
         top: getTopLocation(e) 
        }) 
        .off('click') 
        .on('click', function (e) { 
         $(this).hide(); 

         var $invokedOn = $(this).data("invokedOn"); 
         var $selectedMenu = $(e.target); 

         settings.menuSelected.call(this, $invokedOn, $selectedMenu); 
        }); 

       return false; 
      }); 

      //make sure menu closes on any click 
      $(document).click(function() { 
       $(settings.menuSelector).hide(); 
      }); 
     }); 

     function getLeftLocation(e) { 
      var mouseWidth = e.pageX; 
      var pageWidth = $(window).width(); 
      var menuWidth = $(settings.menuSelector).width(); 

      // opening menu would pass the side of the page 
      if (mouseWidth + menuWidth > pageWidth && 
       menuWidth < mouseWidth) { 
       return mouseWidth - menuWidth; 
      } 
      return mouseWidth; 
     } 

     function getTopLocation(e) { 
      var mouseHeight = e.pageY; 
      var pageHeight = $(window).height(); 
      var menuHeight = $(settings.menuSelector).height(); 

      // opening menu would pass the bottom of the page 
      if (mouseHeight + menuHeight > pageHeight && 
       menuHeight < mouseHeight) { 
       return mouseHeight - menuHeight; 
      } 
      return mouseHeight; 
     } 

    }; 
})(jQuery, window); 
    //for context menu 

//$(document).on('keydown', '.inputs', function (e) { 

$("#example td").contextMenu({ 
    menuSelector: "#contextMenu", 
    menuSelected: function (invokedOn, selectedMenu) { 
     var value = invokedOn.parent().children(':first').text(); 

     $.ajax({ 
      url: "../xyz/GetItemInfoDetails", 
      type: 'POST', 
      dataType: 'json', 
      data: { "item_id": value }, 
      success: function (data) { 
       if (data.ItemID != null) { 

        $("#value_itemId").html(data.ItemID); 
        $("#value_ItemDescription").html(data.ItemDescription); 
        $("#value_ItemGroup").html(data.ItemGroup); 
        $("#value_ItemCategory").html(data.ItemCategory); 
        $("#value_ItemUnitOfMesure").html(data.ItemUnitOfMesure); 
       } 
      } 
     }); 
     $("#itemdetailsmodal").modal('show'); 

    } 
}); 

Answer 1

используйте параметр fnRowCallback при создании экземпляра вашего datatable. Затем внутри функции для него создайте свое контекстное меню.

"fnRowCallback": function (nRow){ 
    $(nRow).on('mousenter', function() {  
      $(this).contextMenu({ 
       menu: 'productionRightClickMenu' 
      }, 
     function (action, el, pos) { 
      alert("hi");   
     }); 
    }); 
} 

Somethin как это может работать с nRow быть обратного вызова в выбранной строке в таблице