I am using ngTable with angularJs. I have delete button for every row. When i am deleting data of last page it's not coming to the second last page. It just shows blank page.
Before -
on 3rd it has one record like below
After -
after deleting the record on 3rd page. it shows blank table with no pages at the bottom. Ideally it should go the second page.
How do i refresh the table so that it goes to the second last page after deleting all the records on the last page ??
https://plnkr.co/edit/GeFYGttRJKWO3HCr
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
AngularJs Table with ng-table module Example
</title>
<script src="https://code.angularjs.org/1.8.2/angular.js"></script>
<script src="http://code.angularjs.org/1.8.2/angular-resource.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/bundles/ng-table.min.css">
<style>.ng-table-sort-header{
background-color:dimgrey;
color:#ffffff;
}
.pagination {
display: inline-block;
padding-left: 0;
margin: 20px 0;
border-radius: 4px;
}
.pagination>li {
display: inline;
}
.pagination>li:first-child>a, .pagination>li:first-child>span {
margin-left: 0;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.pagination>li>a, .pagination>li>span {
position: relative;
float: left;
padding: 6px 12px;
margin-left: -1px;
line-height: 1.42857143;
color: #337ab7;
text-decoration: none;
background-color: #fff;
border: 1px solid #ddd;
}
.pagination>.active>a{
z-index: 2;
color: #fff;
cursor: default;
background-color: #337ab7;
border-color: #337ab7;
}</style>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/bundles/ng-table.min.js"></script>
<script type="text/javascript">
var app = angular.module("ngtableApp", ["ngTable"]);
app.controller("ngtableCtrl", function ($scope, $filter, NgTableParams) {
$scope.users =[];
$scope.users = [
{ id:1,name: "Madhav Sai", age: 10, location: 'Nagpur' },
{ id:2,name: "Suresh Dasari", age: 30, location: 'Chennai' },
{ id:3,name: "Rohini Alavala", age: 29, location: 'Chennai' },
{ id:4,name: "Praveen Kumar", age: 25, location: 'Bangalore' },
{ id:5,name: "Sateesh Chandra", age: 27, location: 'Vizag' },
{ id:6,name: "Siva Prasad", age: 38, location: 'Nagpur' },
{ id:7,name: "Sudheer Rayana", age: 25, location: 'Kakinada' },
{id:8, name: "Honey Yemineni", age: 7, location: 'Nagpur' },
{ id:9,name: "Mahendra Dasari", age: 22, location: 'Vijayawada' },
{ id:10,name: "Mahesh Dasari", age: 23, location: 'California' },
{id:11, name: "Nagaraju Dasari", age: 34, location: 'Atlanta' }
];
$scope.usersTable = new NgTableParams({
page: 1,
count: 5,
sorting : {
name : 'desc'
}
},
{
counts:[],
total: $scope.users.length,
getData:function (params) {
console.log('params '+ JSON.stringify(params));
$scope.data = params.sorting() ? $filter('orderBy')($scope.users, params.orderBy()) : $scope.users;
$scope.data = params.filter() ? $filter('filter')($scope.data, params.filter()) : $scope.data;
// $scope.data = $scope.data.slice(0, 20);
$scope.data = $scope.data.slice((params.page() - 1) * params.count(), params.page() * params.count());
return $scope.data;
}
});
$scope.deleteData = function(obj){
const indexOfObject = $scope.users.findIndex(object => {
return object.id === obj.id;
});
$scope.users.splice(indexOfObject, 1);
$scope.usersTable.reload();
}
});
</script>
</head>
<body ng-app="ngtableApp">
<div ng-controller="ngtableCtrl">
<h2>AngularJS ng-table Filtering Example</h2>
<table ng-table ="usersTable" show-filter=true class="table table-bordered table-striped">
<tr ng-repeat="user in data">
<td data-title="'Name'" sortable="'name'" filter="{ 'name': 'text' }">{{user.name}}</td>
<td data-title="'Age'" sortable="'age'" filter="{ 'age': 'text' }">{{user.age}}</td>
<td data-title="'Location'" sortable="'location'" filter="{ 'location': 'text' }">{{user.location}}</td>
<td data-title="'Action'" data-ng-click="deleteData(user)" >delete</td>
</tr>
</table>
</div>
</body>
</html>