Angular Datatables ChangeData not updating - angularjs

I'm using Angular.js Datatables, it's a version no longer supported by the author but until I can refactor and upgrade the verison for my application I need to maintain the current implementation.
Put simply for each row in my table I have an action button. That action button will for example delete some data and if success the table should be re-drawn, sometimes with a data from a different source. Here is what I have so far:
var vm = this;
vm.dtInstance = {};
vm.dtOptions = DTOptionsBuilder
.fromSource('/datatables/watches.json')
.withDataProp('data')
.withDOM('frtip')
.withOption('createdRow', function(row) {
$compile(angular.element(row).contents())($scope);
})
.withOption('processing', true)
.withOption('bServerSide', true)
.withOption('sDom', 'lBfrtip')
.withPaginationType('full_numbers')
.withOption('order', [0, 'asc'])
.withDisplayLength(10)
;
vm.dtColumns = [
DTColumnBuilder.newColumn('Watches.id').withTitle('#').withOption('name', 'Watches.id').renderWith(function(data, type, res) {return res.id;}),
DTColumnBuilder.newColumn('Listings.title').withTitle('Listing').withOption('name', 'Listings.title').renderWith(function(data, type, res) {return res.listing.title;}),
DTColumnBuilder.newColumn('Users.username').withTitle('Seller').withOption('name', 'Users.username').renderWith(function(data, type, res) {return res.listing.user.username;}),
DTColumnBuilder.newColumn('Watches.created').withTitle('Added').withOption('name', 'Watches.created').renderWith(function(data, type, res) {return moment(res.created).format('YYYY-MM-DD')}),
DTColumnBuilder.newColumn('action').withTitle('Actions').notSortable().withOption('searchable', false)
.renderWith(function(data, type, res) {
return '<button class="btn btn-danger action" ng-click="results.addWatch(' + res.id + ')">Un-watch</button>';
}
)
];
vm.addWatch = function(id) {
vm.dtInstance.changeData('/datatables/watches.json').rerender();
};
The ng-click on the button works, but the changeData does not do anything.
I believe the problem is related to the $compile because if I add a static button/link in my template which calls the same function the table refreshes with the target data source.

Related

Can't workout how to reload angular-datatable after deleting records from the database

I can't seem to work out how to redraw my Angular-Datatable after I delete a record from my database. I don't get any errors, but the table never seems to redraw unless I manually refresh the page. I have been trying to work with many examples from the website documentation.
I have my datatable:
$scope.dtInstance = {};
$scope.selectedItems = [];
$scope.toggleItem = toggleItem;
$scope.reloadData = reloadData;
// Build the User table
$scope.dtOptions = DTOptionsBuilder
.fromFnPromise(function() {
var deferred = $q.defer();
deferred.resolve(users);
return deferred.promise;
})
.withBootstrap() // Style with Bootstrap
.withOption('responsive', true)
.withDisplayLength(15) // Show 15 items initially
.withOption('order', [0, 'asc']) // Sort by the first column
.withOption('lengthMenu', [15, 50, 100]) // Set the length menu items
.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 (!$scope.headerCompiled) {
// Use this headerCompiled field to only compile header once
$scope.headerCompiled = true;
$compile(angular.element(header).contents())($scope);
}
})
.withOption('fnRowCallback', formatCell);
$scope.dtColumns = [
DTColumnBuilder.newColumn(null).withTitle('Username').withClass('col-md-2').renderWith(createUsernameHyperlink),
DTColumnBuilder.newColumn('Email').withTitle('Email'),
DTColumnBuilder.newColumn('Level').withTitle('Role').withClass('col-md-2'),
DTColumnBuilder.newColumn('LastConnected').withTitle('Last Accessed'),
DTColumnBuilder.newColumn('Verified').withTitle('Account Verified').withClass('col-md-2'),
DTColumnBuilder.newColumn(null).withTitle('')
.notSortable()
.renderWith(function(data, type, full, meta) {
return '<input type="checkbox" ng-click="toggleItem(' + data.Id + ')" />';
}).withClass("text-center")
];
// Reload the datatable
function reloadData() {
var resetPaging = false;
$scope.dtInstance.reloadData(callback, resetPaging);
};
function callback(json) {
console.log(json);
};
And then I have my delete function that sits in the same controller. Calling reloadData() on a successful response from the service. I can see from the console.log that it is calling the function correctly, but nothing happens.
$scope.deleteUser = function( selectedItems ) {
swal({
title: 'Are you sure?',
text: 'Are you sure you want to delete the selected account profile(s)? This process cannot be undone...',
type: 'warning',
showCancelButton: true,
confirmButtonText: 'Delete',
confirmButtonColor: "#DD6B55",
closeOnConfirm: false,
allowEscapeKey: true,
showLoaderOnConfirm: true
}, function() {
setTimeout( function() {
// Delete user
UsersService.deleteUser( selectedItems.toString() )
.then(function( data ) {
// Show a success modal
swal({
title: 'Success',
text: 'User has been deleted!',
type: 'success',
confirmButtonText: 'Close',
allowEscapeKey: false
}, function() {
reloadData(); //<== Calls the function but doesn't do anything
//$state.go('users');
});
}, function() {
// Show an error modal
swal({
title: 'Oops',
text: 'Something went wrong!',
type: 'error',
confirmButtonText: 'Close',
allowEscapeKey: true
});
});
}, 1000);
});
};
Just wondering if I have missed some step?
As suggested by #davidkonrad in a previous comment and more so from the Angular-Datatable's author, I was not reloading my content when attempting to redraw my table. Even though I was referencing my data (users) from an injected service, it was never getting updated within the controller and so my table content was never differing.
The author suggested that it is preferable to load the data from a promise that makes a HTTP request, thus allowing further calls to the promise each time the table redraws.
So instead of this:
// Build the User table
$scope.dtOptions = DTOptionsBuilder
.fromFnPromise(function() {
var deferred = $q.defer();
deferred.resolve(users);
return deferred.promise;
})
.withBootstrap() // Style with Bootstrap
I changed it to this:
// Build the User table
$scope.dtOptions = DTOptionsBuilder
.fromFnPromise(function() {
return UsersService.getUsers();
})
.withBootstrap() // Style with Bootstrap
Which now updates my table fine upon each redraw event with a call to $scope.dtInstance.reloadData();
My Github post can be found here
setTimeout function works from outside of the angular digest cycle since it's async. If you want actions you take inside a timeout to apply to the angular digest cycle you should use $timeout instead.
Another option is to use $scope.apply(), but this will just mimic the $timeout function.
Please note that you'll need to inject $timeout to your controller.

Passing locals into an $mdDialog when using confirm()

I am trying to show an $mdDialog on a page to confirm deletion of an object. I have a simple delete button on the page, wired to a controller function:
<button ng-click="delete(item, $event)">Delete</button>
In the controller, I have:
$scope.delete = function (item, ev) {
var confirm = $mdDialog.confirm()
.title('Delete item?')
.textContent('The item will be irretrievably deleted!')
.ariaLabel('Delete')
.targetEvent(ev)
.ok('Delete!')
.cancel('Cancel');
$mdDialog.show(confirm).then(function () {
// delete
console.log("test");
}, function () {
// don't delete
});
};
I cannot work out how to pass the item object into the actual delete function. The documentation shows how to pass locals into a dialog, but that seems to preclude the use of confirm() for building the options.
Either provide an $mdDialogPreset returned from alert(), and
confirm(), or an options object with the following properties:
(emphasis mine)
You should be able to just use the 'item'.
$scope.delete = function (item, ev) {
var confirm = $mdDialog.confirm()
.title('Delete item?')
.textContent('The item will be irretrievably deleted!')
.ariaLabel('Delete')
.targetEvent(ev)
.ok('Delete!')
.cancel('Cancel');
$mdDialog.show(confirm).then(function () {
//item is available here
console.log(item);
}, function () {
// don't delete
});
};

Rerender angular-datatables when switching language with angular-translate

I use angular-translate with angular-datatables and implemented a language switch between german and english (Explained here Switching between languages. Switching language works well but not with angular-datatables. When i switch angular-datatables keeps the old translations for the table header.
angular-datatables Controller:
It's loading the datatables data via json with a promise and then draws the table. It also refreshes the table every 5 minutes. I implemented a public function "rerenderTable" which i call when switching the app language.
.controller('DashboardCtrl', ['$scope', '$rootScope', 'DTOptionsBuilder', 'DTColumnBuilder', 'DTInstances', '$resource',
'$interval', '$translate',
function($scope, $rootScope, DTOptionsBuilder, DTColumnBuilder, DTInstances, $resource, $interval, $translate)
{
$scope.initTargetPackaging = function initTargetPackaging()
{
$scope.sourceUrl = 'json/v1.0.0/dashboard/datatables/myjson1.json';
};
$scope.initTargetConversion = function initTargetConversion()
{
$scope.sourceUrl = 'json/v1.0.0/dashboard/datatables/myjson2.json';
};
// Get the TargetPackaging JSON Data with promise AJAX call
var vm = this;
vm.dtOptions = DTOptionsBuilder.fromFnPromise( function()
{
return $resource($scope.sourceUrl).query().$promise;
})
.withOption('bInfo', false)
.withOption('paging', false)
.withOption('filter', false)
.withOption('rowCallback', rowCallback);
// Create the table columns
vm.dtColumns = [
DTColumnBuilder.newColumn('customer')
.withTitle($translate('DIRECTIVES.DASHBOARD.DATATALBE_TARGET_PACKAGING_COLUMN_CUSTOMER')),
DTColumnBuilder.newColumn('today')
.withTitle($translate('DIRECTIVES.DASHBOARD.DATATALBE_TARGET_PACKAGING_COLUMN_TODAY')),
DTColumnBuilder.newColumn('week')
.withTitle($translate('DIRECTIVES.DASHBOARD.DATATALBE_TARGET_PACKAGING_COLUMN_7DAYS')),
DTColumnBuilder.newColumn('month')
.withTitle($translate('DIRECTIVES.DASHBOARD.DATATALBE_TARGET_PACKAGING_COLUMN_30DAYS'))
];
vm.newPromise = newPromise;
vm.reloadData = reloadData;
vm.dtInstance = {};
function newPromise()
{
return $resource($scope.sourceUrl).query().$promise;
}
/**
* Reload the data
*/
function reloadData()
{
var resetPaging = false;
vm.dtInstance.reloadData(resetPaging);
}
// Trigger reloading - 5 mins
$interval(reloadData, 300000);
function rowCallback(nRow, aData)
{
// Add status CSS class if state is true
if (aData['state'] != undefined
&& aData['state'] === true)
{
$(nRow).addClass('ad-status-inactive');
}
}
$rootScope.rerenderTable = function()
{
vm.dtInstance.rerender();
};
}]);
Function to switch language:
$scope.changeLang = function(key)
{
$translate.use(key).then( function(key)
{
console.log("Sprache zu " + key + " gewechselt.");
$rootScope.rerenderTable();
},
function(key)
{
// Trigger log error message (failure of switching language)
});
};
Triggered here in html:
<div id="language-switch" class="col-xs-2" ng-controller="LanguageCtrl">
<div class="inner">
{{ 'MAIN_NAVIGATION.CHOOSE_LANGUAGE' | translate }}
<span ng-click="changeLang('en')" class="lang-sm" lang="en"></span>
<span ng-click="changeLang('de')" class="lang-sm" lang="de"></span>
</div>
</div>
Summary: Switching languages works well. But not in the case of angular-datatables. It does not switch the language. But translating the strings is fine.
How do i get angular-datatables to rerender the table by using the currently chosen language?
1- Listen to the language change to render the table afterwards.
$rootScope.$on('$translateChangeEnd', function (event, lang) {
$scope.dtInstance.rerender();
});
2-Inside constructor function of your table
var headerCallback = function( thead, data, start, end, display ) {
$compile(angular.element(thead).contents())($scope);
}
3-
$scope.dtOptions(your name) = DTOptionsBuilder
.newOptions()
.withOption('headerCallback', headerCallback)
..........your code
$scope.dtColumns = [
DTColumnBuilder.newColumn('code').withTitle(`${'<span translate>'}${'TAG'}${'</span>'}`).renderWith(your_code).withClass('center-text'),
.........
Works for me ;)
A little bit late but here is an answer, which is not the best imho:
$rootScope.$on('$translateChangeSuccess', function (event, lang) {
vm.dtOptions.withLanguageSource('http://cdn.datatables.net/plug-ins/1.10.11/i18n/'+(lang.language == 'de' ? 'German' : 'English')+'.json');
$rootScope.rerenderTable();
});
It's a shame, they doesn't provide language files named like the ISO-codes. So you have to convert them into the english "long" language names.

Angular-DataTables custom filter

I am trying to add a custom filter to angular-DataTables with server side processing, which works perfectly with sorting and built in search of datatables.
I was following example Angular-DataTables, to build the server side processing and setup the DataTable, in searching around i have found some info but haven't been able to make it work.
What i am trying to get is to redraw the table with filtered data once the checkbox [Player] has been triggered.
Does anyone know a solution for this or has a working example for this?
have found this example Custom Table Filter, but it seems it doesn't work either.
HTML:
<div ng-app="showcase"><div ng-controller="ServerSideProcessingCtrl">
<label><input type="checkbox" id="customFilter" value="player"> Player</label>
<table datatable="" dt-options="dtOptions" dt-columns="dtColumns" class="row-border hover"></table>
JS part:
'use strict';
angular.module('showcase', ['datatables'])
//.controller('ServerSideProcessingCtrl', ServerSideProcessingCtrl);
.controller('ServerSideProcessingCtrl',["$scope", "DTOptionsBuilder", "DTColumnBuilder", function($scope, DTOptionsBuilder, DTColumnBuilder) {
//function ServerSideProcessingCtrl(DTOptionsBuilder, DTColumnBuilder) {
console.log($scope);
$scope.dtOptions = DTOptionsBuilder.newOptions()
.withOption('ajax', {
// Either you specify the AjaxDataProp here
// dataSrc: 'data',
url: 'getTableData.php',
type: 'POST'
})
// or here
.withDataProp('data')
.withOption('serverSide', true)
.withPaginationType('full_numbers');
$scope.dtColumns = [
DTColumnBuilder.newColumn('id').withTitle('ID'),
DTColumnBuilder.newColumn('name').withTitle('First name'),
DTColumnBuilder.newColumn('position').withTitle('Position'),
DTColumnBuilder.newColumn('type').withTitle('Type')
];
$scope.$on('event:dataTableLoaded', function(event, loadedDT) {
console.log(event);
console.log(loadedDT);
$('#customFilter').on('change', function() {
loadedDT.DataTable.draw();
} );
});
}]);
JSON on load:
{"draw":"1","recordsTotal":8,"recordsFiltered":8,"data":[{"id":"1","name":"Raul","position":"front","type":"player"},{"id":"2","name":"Crespo","position":"front","type":"player"},{"id":"3","name":"Nesta","position":"back","type":"player"},{"id":"4","name":"Costacurta","position":"back","type":"player"},{"id":"5","name":"Doc Brown","position":"staff","type":"medic"},{"id":"6","name":"Jose","position":"staff","type":"manager"},{"id":"7","name":"Ferguson","position":"staff","type":"manager"},{"id":"8","name":"Zinedine","position":"staff","type":"director"}]}
After searching and browsing, combined few examples and came up with this.
HTML :
<label><input type="checkbox" id="customFilter" value="player" ng-click="reload()" > Player</label>
JS:
'use strict';
angular.module('showcase', ['datatables'])
//.controller('ServerSideProcessingCtrl', ServerSideProcessingCtrl);
.controller('ServerSideProcessingCtrl',["$scope", "DTOptionsBuilder", "DTColumnBuilder","DTInstances", function ($scope, DTOptionsBuilder, DTColumnBuilder, DTInstances) {
//function ServerSideProcessingCtrl(DTOptionsBuilder, DTColumnBuilder) {
console.log($scope);
$scope.dtOptions = DTOptionsBuilder.newOptions()
.withOption('ajax', {
// Either you specify the AjaxDataProp here
// dataSrc: 'data',
url: 'getTableData.php',
type: 'POST',
// CUSTOM FILTERS
data: function (data) {
data.customFilter = $('#customFilter').is(':checked');
}
})
// or here
.withDataProp('data')
.withOption('serverSide', true)
.withPaginationType('full_numbers');
$scope.dtColumns = [
DTColumnBuilder.newColumn('id').withTitle('ID'),
DTColumnBuilder.newColumn('name').withTitle('First name'),
DTColumnBuilder.newColumn('position').withTitle('Position'),
DTColumnBuilder.newColumn('type').withTitle('Type')
];
DTInstances.getLast().then(function (dtInstance) {
$scope.dtInstance = dtInstance;
});
$scope.reload = function(event, loadedDT) {
$scope.dtInstance.reloadData();
};
}]);
and on the backend just go through the $_POST and check for custom filter, hopefully this will help someone
You can use withFnServerData with fromSource functions instead of
withOption:
This API allows you to override the default function to retrieve the data (which is $.getJSON according to DataTables documentation) to something more suitable for you application.
It's mainly used for Datatables v1.9.4. See DataTable documentation.
$scope.dtOptions = DTOptionsBuilder.fromSource('data.json')
.withFnServerData(serverData);
function serverData (sSource, aoData, fnCallback, oSettings) {
oSettings.jqXHR = $.ajax({
'dataType': 'json',
'type': 'POST',
'url': sSource,
'data': aoData,
'success': fnCallback
});
:)
Ok sorry its not a full blown example. This only works with angular and datatables, if you do a filter on the ng-repeat eg | aFilter:this The this transfers the scope. The filtering applied can now be quite complex. Within the ng-controller <div> you can have an html partial containing drop downs or input texts, all having an ng-model value.
When these change they kick off the filter routineaFilter an angular.filter('aFilter'.... js routine. The records are piped through the afilter routine allowing the ones wanted to be pushed onto an array and this is what is returned with the return. It doesn't work with breeze, yet. Be aware it is unlikely to be server side. To deal with server side maybe an SQL call in the service....another day.
eg in the ng-table id="test" :
<tr ng-repeat="edRec in aSetOfJSonRecords | aFilter:this | orderBy:'summat'">
{{edRec.enCode}} etc
</tr>
in the aFilter, the fltEnCode represents the ng-model values, the test variable allows freedom from nulls causing issues upon comparison, good idea to test for undefined first:
app.filter('aFilter', [function () {
return function (items, $scope) {
var countItems = 0;
var filtered = [];
var isOK = 0;
angular.forEach(items, function (item) {
isOK = 1;
// some conditions
if ($scope.fltEnCode !== "") {
if (item.enCode === null) { test = ""; } else { test = item.enCode; }
if (test.indexOf($scope.fltEnCode) < 0) isOK = 0;
}
// end of conditions
if (isOK > 0) {
filtered.push(item);
countItems++;
}
});
// alert(countItems);
return filtered;
};
}]);
Hope its of some use. I've avoided boolean variables as they have given grief before. Odd occasions have needed an ng-change in the html items pointing to an angular function resetting the data by calling the getTheItemsForTest() in the controller. This redraws the list. Having
$scope.dtOptions = {
stateSave: false, .......
in your controller, keeps the sorting columns correct.
$(document).ready(function() {
var table = $('#test').DataTable();
table.draw();
};
might also be useful if its recalcitrant. I need to know how to make it work for breeze??? Enjoy..
here is what I really missed after I searched alot
bower install datatables-light-columnfilter

UI Notifications with angular js

I have to implement some standard notification UI with angular js. My approach is the following (simplified):
<div ng-controller="MainCtrl">
<div>{{message}}</div>
<div ng-controller="PageCtrl">
<div ng-click="showMessage()"></div>
</div>
</div>
And with the page controller being:
module.controller("PageCtrl", function($scope){
counter = 1
$scope.showMessage = function(){
$scope.$parent.message = "new message #" + counter++;
};
});
This works fine. But I really don't like the fact that I need to call $scope.$parent.
Because if I am in another nested controller, I will have $scope.$parent.$parent, and this becomes quickly a nightmare to understand.
Is there another way to create this kind of global UI notification with angular?
Use events to send messages from one component to another. That way the components don't need to be related at all.
Send an event from one component:
app.controller('DivCtrl', function($scope, $rootScope) {
$scope.doSend = function(){
$rootScope.$broadcast('divButton:clicked', 'hello world via event');
}
});
and create a listener anywhere you like, e.g. in another component:
app.controller('MainCtrl', function($scope, $rootScope) {
$scope.$on('divButton:clicked', function(event, message){
alert(message);
})
});
I've created a working example for you at http://plnkr.co/edit/ywnwWXQtkKOCYNeMf0FJ?p=preview
You can also check the AngularJS docs about scopes to read more about the actual syntax.
This provides you with a clean and fast solution in just a few lines of code.
Regards,
Jurgen
You should check this:
An AngularJS component for easily creating notifications. Can also use HTML5 notifications.
https://github.com/phxdatasec/angular-notifications
After looking at this: What's the correct way to communicate between controllers in AngularJS? and then that: https://gist.github.com/floatingmonkey/3384419
I decided to use pubsub, here is my implementation:
Coffeescript:
module.factory "PubSub", ->
cache = {}
subscribe = (topic, callback) ->
cache[topic] = [] unless cache[topic]
cache[topic].push callback
[ topic, callback ]
unsubscribe = (topic, callback) ->
if cache[topic]
callbackCount = cache[topic].length
while callbackCount--
if cache[topic][callbackCount] is callback
cache[topic].splice callbackCount, 1
null
publish = (topic) ->
event = cache[topic]
if event and event.length>0
callbackCount = event.length
while callbackCount--
if event[callbackCount]
res = event[callbackCount].apply {}, Array.prototype.slice.call(arguments, 1)
# some pubsub enhancement: we can get notified when everything
# has been published by registering to topic+"_done"
publish topic+"_done"
res
subscribe: subscribe
unsubscribe: unsubscribe
publish: publish
Javascript:
module.factory("PubSub", function() {
var cache, publish, subscribe, unsubscribe;
cache = {};
subscribe = function(topic, callback) {
if (!cache[topic]) {
cache[topic] = [];
}
cache[topic].push(callback);
return [topic, callback];
};
unsubscribe = function(topic, callback) {
var callbackCount;
if (cache[topic]) {
callbackCount = cache[topic].length;
while (callbackCount--) {
if (cache[topic][callbackCount] === callback) {
cache[topic].splice(callbackCount, 1);
}
}
}
return null;
};
publish = function(topic) {
var callbackCount, event, res;
event = cache[topic];
if (event && event.length > 0) {
callbackCount = event.length;
while (callbackCount--) {
if (event[callbackCount]) {
res = event[callbackCount].apply({}, Array.prototype.slice.call(arguments, 1));
}
}
publish(topic + "_done");
return res;
}
};
return {
subscribe: subscribe,
unsubscribe: unsubscribe,
publish: publish
};
});
My suggestion is don't create a one on your own. Use existing models like toastr or something like below.
http://beletsky.net/ng-notifications-bar/
As suggested above, try to use external notifications library. There're a big variety of them:
http://alertifyjs.com/
https://notifyjs.com/
https://www.npmjs.com/package/awesome-notifications
http://codeseven.github.io/toastr/demo.html

Resources