Angular data - rowCallback
can someone help me with rowCallback. The problem is that I have a table and you can click anywhere in the table to reveal information for the clicked item. Check the box on the first AP. But when I check the box, I don't want to open the information. Here is an image for a better explanation
my code
var vm = this;
vm.selected = {};
vm.selectAll = false;
vm.toggleAll = toggleAll;
vm.toggleOne = toggleOne;
var titleHtml = '<input type="checkbox" ng-model="showCase.selectAll" ng-click="showCase.toggleAll(showCase.selectAll, showCase.selected)">';
function getUserTokenFromLocalStorage(localStorage) {
var authData = [];
for (key in localStorage) {
if (key == "ls.authorizationData") {
authData = localStorage[key];
}
}
var jsonObj = JSON.parse(authData);
return jsonObj.token;
};
var vm = this;
vm.message = '';
vm.someClickHandler = someClickHandler;
vm.dtOptions = DTOptionsBuilder.newOptions()
.withOption('ajax', {
// Either you specify the AjaxDataProp here
// dataSrc: 'data',
url: serviceBase + 'test',
type: 'POST',
headers: {
'xtoken': 'Bearer ' + getUserTokenFromLocalStorage(localStorage)
}
})
// or here
.withDataProp('data')
.withOption('processing', true)
.withOption('serverSide', true)
.withOption('rowCallback', rowCallback)
.withOption('createdRow', function(row, data, dataIndex) {
// Recompiling so we can bind Angular directive to the DT
$compile(angular.element(row).contents())($scope);
})
.withOption('headerCallback', function(header) {
if (!vm.headerCompiled) {
// Use this headerCompiled field to only compile header once
vm.headerCompiled = true;
$compile(angular.element(header).contents())($scope);
}
})
.withPaginationType('full_numbers')
vm.dtColumns = vm.dtColumns = [
DTColumnBuilder.newColumn(null).withTitle(titleHtml).notSortable()
.renderWith(function(data, type, full, meta) {
vm.selected[full.id] = false;
return '<input type="checkbox" ng-model="showCase.selected[' + data.id + ']" ng-click="showCase.toggleOne(showCase.selected)">';
}), //don't change state when click on this TD, only check checkbox.
DTColumnBuilder.newColumn('id').withTitle('ID'),
DTColumnBuilder.newColumn('type').withTitle('Type'),
DTColumnBuilder.newColumn('city').withTitle('City'),
DTColumnBuilder.newColumn('country').withTitle('Country'),
DTColumnBuilder.newColumn('last_report_dt').withTitle('Last report'),
DTColumnBuilder.newColumn('hardware_version').withTitle('HW version'),
DTColumnBuilder.newColumn('rpi_image_version').withTitle('Image version'),
DTColumnBuilder.newColumn('software_version').withTitle('Code version'),
DTColumnBuilder.newColumn('internal_note').withTitle('Internal note'),
DTColumnBuilder.newColumn(null).withTitle('Info').notSortable()
.renderWith(function(data, type, full, meta) {
vm.selected[full.id] = false;
return '<a class="btn btn-default" ng-href="info/' + data.id + '">Info</a>';
}),
];
function toggleAll(selectAll, selectedItems) {
for (var id in selectedItems) {
if (selectedItems.hasOwnProperty(id)) {
selectedItems[id] = selectAll;
}
}
}
function toggleOne(selectedItems) {
for (var id in selectedItems) {
if (selectedItems.hasOwnProperty(id)) {
if (!selectedItems[id]) {
vm.selectAll = false;
return;
}
}
}
vm.selectAll = true;
}
function someClickHandler(info) {
vm.message = info.id;
$location.path('info/' + info.id);
}
function rowCallback(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
// Unbind first in order to avoid any duplicate handler (see https://github.com/l-lin/angular-datatables/issues/87)
$('td', nRow).unbind('click');
$('td', nRow).bind('click', function() {
$scope.$apply(function() {
vm.someClickHandler(aData);
});
});
return nRow;
}
}
source to share
I had this problem. I think your approach is a bit backward. You declare a click handler td
internally rowCallback
to be able to pass the id. I would recommend this instead:
-
Add a class
no-click
to the first column to prevent clicking:DTColumnBuilder.newColumn(null).withTitle(titleHtml).notSortable() .withClass('no-click') .renderWith(function(data, type, full, meta) { vm.selected[full.id] = false; return '<input type="checkbox" ng-model="showCase.selected[' + data.id + ']" ng-click="showCase.toggleOne(showCase.selected)">'; }),
-
Change
rowCallback
to do nothing but insert theid
as attribute into the string:function rowCallback(nRow, aData, iDisplayIndex, iDisplayIndexFull) { $(nRow).attr('data-id', aData.id); }
-
Create a delegated event handler
td
to replace the event handler internallyrowCallback
and yourssomeClickHandler()
:$('#tableid').on('click', 'tbody td:not(.no-click)', function() { var id = $(this).parent().attr('data-id'); vm.message = id; $location.path('info/' + id); })
source to share