delete row after how to refresh datatable angularjs?

Question

I want to delete row after refresh datatable or reload datatable using angularjs. i have done with this code show list of data and delete row.

app.controller("userscontroller", ["$scope", "$http", "DTOptionsBuilder", "DTColumnBuilder", "userservice","$compile"


function ($scope, $http, DTOptionsBuilder, DTColumnBuilder, userservic,$compile) {       

$scope.dtColumns = [            
    DTColumnBuilder.newColumn("fullName", "Full Name").withOption('name', 'firstname'),
    DTColumnBuilder.newColumn("username", "Name").withOption('name', 'username'),
    DTColumnBuilder.newColumn("email", "Email").withOption('name', 'email'), 
    DTColumnBuilder.newColumn(null).withTitle('Action').withOption('defaultContent', ' ').notSortable()
        .renderWith(function (data, type, full, meta) {
            if (data.UserCount > 1)
                return '<button class="btn btn-primary" ng-click="delete(' + data.id + ');"><i class="fa fa-eye"></i>' + '</button>';                    
        })          
]

$scope.dtOptions = userservice.GetAllUser(DTOptionsBuilder)
.withOption('processing', true)
.withOption('serverSide', true)
.withPaginationType('full_numbers')
.withDisplayLength(50)
.withOption('aaSorting', [3, 'desc'])

 function createdRow(row, data, dataIndex) {
    $compile(angular.element(row).contents())($scope);
}
}]);

here my delete function:

$scope.delete= function (id) {
        if (confirm("Are you sure want to delete?") == true) {
            var getData = userservice.Deleteuser(id);
            getData.then(function (Msg) {
                if (Msg.statusText == "OK") {
                //here what code i written i don't know
                }
            }, function (err) {

            });
        }
    }

here is my html code=>

<table id="tbluserList" datatable="" dt-options="dtOptions" dt-columns="dtColumns" dt-instance="dtInstance" class="table table-hover"> </table>

Rohan Kumar · Accepted Answer · 2017-03-23 09:03:34Z

1

Try the below code,

if (Msg.statusText == "OK") {
    var index = -1;     
    var users = $scope.users;// Let you have all users here
    for( var i = 0,len=users.length; i < len; i++ ) {
        if( users[i].id === id ) {
            index = i;
            break;
        }
    }
    if( index === -1 ) {
        alert( "Something gone wrong" );
    }
    $scope.users.splice( index, 1 );        
}

A short way,

Pass $index in your function and slice it by using $index like,

return '<button class="btn btn-primary" ng-click="delete('+data.id+',$index);">...';

And Delete Function

$scope.delete = function (id,$index) {
   ....
   if (Msg.statusText == "OK") {
      $scope.users.splice($index, 1 );
   }
   ....
}

Try to reloadData after delete operation like,

//Add below dtOptions
$scope.dtInstance = {};
...

$scope.delete = function (id) {
    ....
    if (Msg.statusText == "OK") {
        $scope.dtInstance.reloadData();
    }
    ...
}

edited Mar 23, 2017 at 9:03

answered Mar 22, 2017 at 12:49

Rohan Kumar

40.7k11 gold badges81 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

coderwill Over a year ago

means are you saying i need first getting all users in $scope.users and then write your code?

Rohan Kumar Over a year ago

I found the same scenario here hello-angularjs.appspot.com/removetablerow

coderwill Over a year ago

but i am not used this type table in html wit i add my html also in question so you can understand very well want can i say.

coderwill Over a year ago

i also try this wave but i got error in console reloadData() is not a function.

Rohan Kumar Over a year ago

Try with dtInstance and see github.com/l-lin/angular-datatables/issues/322

|

Collectives™ on Stack Overflow

delete row after how to refresh datatable angularjs?

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related