Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

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 :)

share

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.