Angular Store Data and Reload Datatable

Question

I'm using datatable: https://l-lin.github.io/angular-datatables and bootstrap: https://angular-ui.github.io/bootstrap/

this what i try to achive: after add data using modal from bootstrap and save it, the datatable is reload (without reload current route).

Here is my modalCtrl:

  .controller('addModalCtrl', ['$scope', '$modalInstance', '$http', 'AdminMenu', 'ResultService',
    function ($scope, $modalInstance, $http, AdminMenu, ResultService) {

    $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
    };

    $scope.menu = {};

    $scope.doSubmit = function () {
        var data = {
            name: $scope.menu.title,
            icon: $scope.menu.icon
        };

        AdminMenu.save(data, function (response) {
            $scope.menu = {};
            ResultService(response);
            $modalInstance.dismiss('cancel');
        }, function (response) {
            ResultService(response.data);
        })
    };
}])

here is my datatable function:

 function AdminMenuTableData($compile, $scope, $modal, DTOptionsBuilder, DTColumnBuilder, SweetAlert, AdminMenu, ResultService, APIROOT) {

$scope.dtOptions = DTOptionsBuilder.fromSource(APIROOT + 'admin-menus')
    .withOption('order', [0, "asc"])
    .withOption('createdRow', function (row, data, dataIndex) {
        // Recompiling so we can bind Angular directive to the DT
        $compile(angular.element(row).contents())($scope);
    });

$scope.dtColumns = [
    DTColumnBuilder.newColumn('id', 'ID').withOption('searchable', false),
    DTColumnBuilder.newColumn('name', 'Name'),
    DTColumnBuilder.newColumn('', 'Actions').renderWith(function (data, type, full, meta) {
        return '<a class="btn btn-default btn-xs" ng-click=edit(' + full.id + ')><i class="fa fa-pencil"></i></a> ' +
            '<a class="btn btn-danger btn-xs" ng-click=delete(' + full.id + ')><i class="fa fa-trash"></i></a>';
    }).notSortable()
];

$scope.dtInstance = {};

function reloadData()
{
    $scope.dtInstance.reloadData();
}

}

How can i call reloadData() function so i can refresh the datatable. I've tried to inject AdminenuTableData function but no luck. injector failed.

Any suggestion?

davidkonrad · Answer 1 · 2018-02-14T12:08:32.533

13

Use rerender() instead. It both destroys the table and reinitialize it, including reloading AJAX sources :

$scope.reloadData = function() {
   $scope.dtInstance.rerender(); 
}

demo -> http://plnkr.co/edit/HbMDcMne3OiH2KYbJ8Iv?p=preview

edited Feb 14 '18 at 12:08

answered Dec 21 '15 at 12:08

davidkonrad

83,997
17
205
265

Its not working I need same solution can you please update the code – 3 rules Dec 23 '17 at 08:59
given plunker is not working can you please update that code sample. – 3 rules Jan 01 '18 at 09:31
@3rules, the plunkr is updated. The github repo was changed, thats why it didnt work. – davidkonrad Feb 14 '18 at 12:09
how to do on staticc datatables? – Sana Ahmed May 30 '18 at 08:23
1

@Sana, what do you mean exactly by "static datatable"? If you just need to redraw / refresh you can `$scope.dtInstance.DataTable.draw()` – davidkonrad May 30 '18 at 08:34
I have a datatable with columns predefined. – Sana Ahmed May 30 '18 at 08:35
http://embed.plnkr.co/o17Hwu6y1S795wIBMAt4/ can you please see this plunker and tell how on changepersons my datatable reloads and show only three records. Even in paging area? thanks in advance – Sana Ahmed May 30 '18 at 08:38
Hey @Sana, you are using a 4 year old fork of angular datatables. Just use the latest (and probably final) angularjs version from **https://github.com/l-lin/angular-datatables/tree/v0.6.2** forked plunkr here -> **https://plnkr.co/edit/dt6dfmxTvhfOnPXSrlex?p=preview** When using this and "the angular way" you should not have to worry about updating the source – davidkonrad May 30 '18 at 10:50
i tried implementing it but im getting error 'TypeError: o.ngDestroy is not a function' – Sana Ahmed May 31 '18 at 16:01
@sana, if you trace the error, what is the origin of where it is throwed? The 4 year old fork you were using had neither a `dtInstance` nor a `ngDestroy`. It was added to the project later on. – davidkonrad May 31 '18 at 16:41
Whenever i am updating $scope.persons it is giving me this error. – Sana Ahmed May 31 '18 at 18:40
https://stackoverflow.com/questions/50630946/datatables-not-reloading-in-angularjs?noredirect=1#comment88276422_50630946 can you please have a look at this @davidkonrad – Sana Ahmed Jun 01 '18 at 07:03

Angular Store Data and Reload Datatable

1 Answers1