I am using datatables and angular-datatables. How do I detect a double click event in the datatable and get the row data? I found the code below but I need it in angular.
$(document).on("dblclick", "#myTable tr", function () {
//code here
});
html
<table datatable="tblRecipe" dt-options="showCase.dtOptions" dt-columns="showCase.dtColumns" dt-instance="showCase.dtInstance" class="table table-bordered"></table>
controller.js
var app = angular.module('app', ['datatables'])
app.controller('MainController', function ($scope, $window, $http, $filter, $timeout, $compile, DTOptionsBuilder, DTColumnDefBuilder, DTColumnBuilder) {
var vm = this;
vm.dtInstance = {};
vm.Recipes = {};
vm.delete = deleteRow;
vm.edit = editRow;
vm.dtOptions = DTOptionsBuilder.newOptions()
.withOption('ajax', {
url: "/Recipes/GetAllRecipes",
type: "POST"
})
.withOption('createdRow', createdRow)
.withOption('select', true);
vm.dtColumns = [
//...
DTColumnBuilder.newColumn(null).withTitle('Actions').notSortable().renderWith(actionsHtml)
];
function actionsHtml(data, type, full, meta) {
vm.Recipes[data.Id] = data;
return '<a title="View" href="javascript:void(0)" ng-click="showCase.view(showCase.Recipes[' + data.Id + '])">' +
' <i class="fa fa-eye" aria-hidden="true"></i>' + '</a>' + '<a title="Edit" href="javascript:void(0)" ng-click="showCase.edit(showCase.Recipes[' + data.Id + '])">' +
' <i class="fa fa-pencil"></i>' + '</a>' + '<a title="Delete" href="javascript:void(0)" ng-click="showCase.delete(showCase.Recipes[' + data.Id + '])" )"="">' + ' <i class="fa fa-trash-o"></i>' + '</a>';
};
//...
});
});
I am using datatables and angular-datatables. How do I detect a double click event in the datatable and get the row data? I found the code below but I need it in angular.
DataTables is jQuery, Angular-DataTables is just directives that make them work in a AngularJS context. Unless you are rendering "the angular way", i.e datatable="ng" you will need to $compile the table, the rows or each cell in callbacks if you want any directive to work.
Simply use a delegated event handler as you would do with jQuery DataTables, and grab the data through dtInstance which among other things hold the API instance :
$('#tableId').on('dblclick', 'tbody tr', function() {
console.log( $scope.dtInstance.DataTable.row(this).data() )
})