I have been using the Jquery Datatables plugin with Jquery for quite some time and I am now trying to go over to using AngularJS with SignalR instead to get realtime updating between browsers. I am looking at Angular-datatables for trying to implement Angular into datables (which I have read isn't that easy) But I cant get it to work.
Simplfied the table looks like this. Probably not the prettiest way of solving everything since I am very new to AngularJS.
<div ng-controller="ActionEditController">
<table id="actionsTable" datatable="" dt-options="dtOptions" dt-column-defs="dtColumnDefs" class="table table-striped table-hover">
<thead>
<tr>
<th>Field A</th>
<th>Field B</th>
<th>Field C</th>
<th>Field D</th>
<th>Field E</th>
<th>Field F</th>
</tr>
</thead>
<tbody>
<tr ng-show="isNew()">
<td>
<select data-ng-options="item.name as item.name for item in options" data-ng-model="add_action.Status" class="form-control"></select>
</td>
<td><input type="text" class="form-control" ng-model="add_action.Description" /></td>
<td><input type="text" class="form-control" ng-model="add_action.Responsible" /></td>
<td><input type="text" class="form-control" datetimepicker ng-model="add_action.Deadline" /></td>
<td><input type="text" class="form-control" datetimepicker ng-model="add_action.Executed" /></td>
<td width="60">
<button name="updateButton" ng-click="add()" ng-show="isNew()" class="btn btn-xs btn-default"><i class="fa fa-save"></i></button>
<button name="deleteButton" ng-click="delete(action)" ng-show="!isNew()" class="btn btn-xs btn-default"><i class="fa fa-trash-o"></i></button>
<button name="cancelButton" ng-click="abort()" ng-show="isNew()" class="btn btn-xs btn-default"><i class="fa fa-times"></i></button>
</td>
</tr>
<tr ng-repeat="action in actions">
<td ng-show="!isEdit(action)">{{action.Status}}</td>
<td ng-show="isEdit(action)">
<select data-ng-options="item.name as item.name for item in options" data-ng-model="edit_action.Status" class="form-control"></select>
</td>
<td ng-show="!isEdit(action)">{{action.Description}}</td>
<td ng-show="isEdit(action)"><input type="text" class="form-control" ng-model="edit_action.Description" /></td>
<td ng-show="!isEdit(action)">{{action.Responsible}}</td>
<td ng-show="isEdit(action)"><input type="text" class="form-control" ng-model="edit_action.Responsible" /></td>
<td ng-show="!isEdit(action)">{{action.Deadline | date : 'dd.MM.yyyy HH:mm'}}</td>
<td ng-show="isEdit(action)"><input type="text" class="form-control" datetimepicker ng-model="edit_action.Deadline" /></td>
<td ng-show="!isEdit(action)">{{action.Executed | date : 'dd.MM.yyyy HH:mm'}}</td>
<td ng-show="isEdit(action)"><input type="text" class="form-control" datetimepicker ng-model="edit_action.Executed" /></td>
<td width="60">
<button name="editButton" ng-click="edit(action)" ng-show="!action.IsLocked" class="btn btn-xs btn-default"><i class="fa fa-pencil"></i></button>
<button name="updateButton" ng-click="update()" ng-show="isEdit(action)" class="btn btn-xs btn-default"><i class="fa fa-save"></i></button>
<button name="deleteButton" ng-click="delete(action)" ng-show="!action.IsLocked" class="btn btn-xs btn-default"><i class="fa fa-trash-o"></i></button>
<button name="cancelButton" ng-click="cancel()" ng-show="isEdit(action)" class="btn btn-xs btn-default"><i class="fa fa-times"></i></button>
</td>
</tr>
</tbody>
</table>
</div>
So what basicly happends with SignalR is that it runs this method when the page is opened.
public override async Task OnConnected()
{
var query = from f in _db.Actions
orderby f.FieldB
select new {
FieldA= f.FieldA,
FieldB= f.FieldB,
FieldC= f.FieldC,
FieldD= f.FieldD,
FieldE= f.FieldE,
FieldF= f.FieldF
};
await Clients.Caller.all(query);
await Clients.Caller.allLocks(_locks.Values);
}
The controller is beeing hooked up like this:
var app = angular.module('app', ['datatables', 'ngResource']);
app.controller("ActionEditController", ["$scope", "DTOptionsBuilder", "DTColumnDefBuilder", ActionEditController]);
And on the client that called this method it runs theese 2 methods. Which is just checking for locks and applying it to the scope.
hubProxy.client.all = function (actions) {
$scope.actions = actions;
}
hubProxy.client.allLocks = function (locks) {
for (i = 0; i < $scope.actions.length; i++) {
$scope.actions[i].IsLocked = false;
}
for (i = 0; i < locks.length; i++) {
for (j = 0; j < $scope.actions.length; j++) {
if (locks[i] === $scope.actions[j].Id) {
$scope.actions[j].IsLocked = true;
break;
}
}
}
$scope.loading = false;
$scope.$apply();
}
And the comes the question. How do I tie this up to the datatables plugin or the angular-datatables plugin? Have tried alot trying to use the examples but can't get it to work. Any help is greatly appreciated :)