swimlane / angular-data-table

A feature-rich but lightweight ES6 AngularJS Data Table crafted for large data sets!
http://swimlane.github.io/angular-data-table/
MIT License
577 stars 141 forks source link

Table is not updating when json is changed in angular-datatable #287

Open mushir3589 opened 7 years ago

mushir3589 commented 7 years ago

datatable for showing value in table. Initially table is loaded but when iam updating the json using a http post method the table is not updating. Please help me. Thanks in advance. Please Check below my angular controller code.

angular.module('xyz') .controller('abc', ['$scope', 'socketIO', '$rootScope', '$http', 'Config', '$location', '$window', '$compile', 'DTOptionsBuilder', 'DTColumnBuilder', '$localStorage', '$q', function($scope, socketIO, $rootScope, $http, config, $location, $window, $compile, DTOptionsBuilder, DTColumnBuilder, $localStorage, $q) { $http.get(config.host + '/allAircrafts') .then(function(res) { $scope.aircraftId = res.data.data; }); var parms; var query = function() { parms = { imei: $scope.aircraftimei, type: $scope.fType }; } query();

    var vm = this;
    vm.message = '';
    vm.edit = edit;
    vm.delete = deleteRow;
    vm.dtInstance = {};
    vm.persons = {};

    var dtOptioncol = function() {
        vm.dtOptions = DTOptionsBuilder.fromFnPromise($scope.newPromise)
            .withPaginationType('full_numbers')
            .withDisplayLength(7)
            .withOption('responsive', true)
            .withOption('createdRow', createdRow)
            .withOption('bFilter', false);

        vm.dtColumns = [
            DTColumnBuilder.newColumn('desc_name').withTitle('Aircraft Name'),
            DTColumnBuilder.newColumn('type').withTitle('Aircraft Type'),
            DTColumnBuilder.newColumn(null).withTitle('Actions').notSortable()
            .renderWith(actionsHtml)
        ];

    }

    dtOptioncol();

    var dataTableoption = function(parameters) {

        $scope.newPromise = function() {

            if (parameters !== null) {

                var defer = $q.defer();
                $http.post(config.host + '/aircraftIds', parameters).then(function(result) {
                    defer.resolve(result.data.data);
                    console.log("data" + JSON.stringify(result.data.data));
                });
                return defer.promise;
            } else {

                var defer = $q.defer();
                $http.post(config.host + '/aircraftIds', parameters).then(function(result) {
                    defer.resolve(result.data.data);
                    console.log("data" + JSON.stringify(result.data.data));
                });
                return defer.promise;

            }

        }

    }

    $scope.searchData = function() {

        var parms = {
            imei: $scope.aircraftimei,
            type: $scope.fType
        };
        dtOptioncol();

        dataTableoption(parms);
        $scope.newPromise(parms);
    }

    dataTableoption(null);

    function edit(person) {
        vm.message = 'You are trying to edit the row: ' + JSON.stringify(person);
        // Edit some data and call server to make changes...
        // Then reload the data so that DT is refreshed

    }

    function deleteRow(person) {
        vm.message = 'You are trying to remove the row: ' + JSON.stringify(person);
        // Delete some data and call server to make changes...
        // Then reload the data so that DT is refreshed
        ;
    }

    function createdRow(row, data, dataIndex) {
        // Recompiling so we can bind Angular directive to the DT
        $compile(angular.element(row).contents())($scope);
    }

    function actionsHtml(data, type, full, meta) {

        vm.persons[data.id] = data;
        return '<button class="btn btn-warning" ng-click="showCase.edit(showCase.persons[' + data.id + '])">' +
            '   <i class="fa fa-edit">Detail</i>' +
            '</button>';

    }

}

]);