CODEWITHSUNDEEP
jqueryangularjsdatatable
coderwill
coderwill

Reputation: 844

delete row after how to refresh datatable angularjs?

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>

Upvotes: 0

Views: 2716

Answers (1)

Rohan Kumar
Rohan Kumar

Reputation: 40639

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();
    }
    ...
}

Upvotes: 1

Related Questions