AngularJS ngTable the pagination not working, showing all data on one page
Solution 1
Here is working solution:
app.controller('mycontroller', ["$scope", "$filter", "ngTableParams", "DatabaseRef", "$firebaseArray",
function ($scope, $filter, ngTableParams, DatabaseRef, $firebaseArray) {
//get all data from firebase database
var mydb = DatabaseRef.ref("projects").orderByKey();
$scope.mylist = $firebaseArray(mydb);
var data = $scope.mylist;
data.$loaded().then(function(data) {
console.log(data.length); // data is loaded here, and the length is 9
$scope.tableParams = new ngTableParams({
page: 1, // show first page
count: 3, // count per page
filter: {
name: '' // initial filter
},
sorting: { city: "asc" }
}, {
filterSwitch: true,
total: 0, //data.length, // length of data
getData: function ($defer, params) {
// use build-in angular filter
var filteredData = params.filter() ?
$filter('filter')(data, params.filter()) :
$scope.mylist;
var orderedData = params.sorting() ?
$filter('orderBy')(filteredData, params.orderBy()) : filteredData;
params.total($scope.mylist.length);
// set total for recalc pagination
$defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
}
});
});
}]);
Solution 2
-
page
param is extra because default is anyway 1. -
filter
is extra because by default it is empty as you have. -
total
is extra because by default it automatically takes the length of dataset -
getData
is extra. You do not need custom filtering. ngTable does its filtering
I suggest replacing this code
console.log(data.length); // data is loaded here, and the length is 9
$scope.tableParams = new ngTableParams({
page: 1, // show first page
count: 3, // count per page
filter: {
name: '' // initial filter
}
}, {
total: data.length, // length of data
getData: function ($defer, params) {
// use build-in angular filter
var orderedData = params.filter() ? $filter('filter')(data, params.filter()) : data;
$scope.users = orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count());
params.total(orderedData.length);
// set total for recalc pagination
$defer.resolve($scope.users);
}
});
into this.
console.log(data.length); // data is loaded here, and the length is 9
$scope.tableParams = new ngTableParams({
count: 3, // count per page
}, {
dataset: data
});
and in HTML change this ng-repeat="obj in mylist"
into this ng-repeat="obj in $data"
Solution 3
Here's a simple example on how to add pagination using ngTable
.
Obviously, make sure you add reference to angularjs.
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.2/angular.js"></script>
Add reference to ngTable
javascript and css.
<link rel="stylesheet"; href="https://unpkg.com/[email protected]/bundles/ng-table.min.css">
<script src="https://unpkg.com/[email protected]/bundles/ng-table.min.js"></script>
After creating your ngApp
, create your table inside your view.
Update:
<strong>Filter:</strong> {{tableParams.filter()|json}}
<table ng-table="tableParams" show-filter="true" class="table table-striped">
<tr ng-repeat="obj in myList">
<td data-title="'Department'" filter="{ department: 'text' }" sortable="'department'">{{ obj.department }}</td>
<td data-title="'Lastname'" >{{ obj.lastname }}</td>
<td data-title="'City'">{{ obj.city }}</td>
</tr>
</table>
On your controller, remove $scope.tableParams
from data.$loaded()
and use $scope.myList
directly.
app.controller('mycontroller', ["$scope", "$filter", "ngTableParams", "DatabaseRef", "$firebaseArray",
function ($scope, $filter, ngTableParams, DatabaseRef, $firebaseArray) {
//get all data from firebase database
var mydb = DatabaseRef.ref("projects").orderByKey();
$scope.mylist = $firebaseArray(mydb);
$scope.mylist.$loaded().then(function(data) {
console.log(data.length); // data is loaded here, and the length is 9
$scope.arrayLength = data.length;
});
$scope.tableParams = new ngTableParams({
page: 1, // show first page
count: 3, // count per page
filter: {
department: '' // initial filter
}
}, {
total: $scope.arrayLength, // length of data
getData: function ($defer, params) {
// use build-in angular filter
$scope.mylist = $defer.resolve(params.filter() ? $filter('filter')($scope.mylist, params.filter()) : $scope.mylist);
$scope.users = $scope.mylist.slice((params.page() - 1) * params.count(), params.page() * params.count());
// set total for recalc pagination
params.total($scope.mylist.length);
}
});
}]);
cplus
Updated on June 05, 2022Comments
-
cplus almost 2 years
I am using ngTables to load my data in table format and show pagination. My data is loaded from Firebase database and currently the length is 9. So I want to show three lines per page.
Here is my code below, when my page is loaded, all nine lines are loaded on the first page whereas I have set the count to 3, and also when I click on the pages, it doesn't move on.
There is another problem with this, the filtering is not working either.
Here is my ng-table in HTML view doesn't change and :
<div ng-controller="mycontroller"> <strong>Filter:</strong> {{tableParams.filter()|json}} <table ng-table="tableParams" show-filter="true" class="table table-striped"> <tr ng-repeat="obj in mylist"> <td data-title="'Department'" filter="{ 'name': 'text' }">{{ obj.department }}</td> <td data-title="'Lastname'" >{{ obj.lastname }}</td> <td data-title="'City'">{{ obj.city }}</td> </tr> </table> </div>
and
mycontroller.js
:app.controller('mycontroller', ["$scope", "$filter", "ngTableParams", "DatabaseRef", "$firebaseArray", function ($scope, $filter, ngTableParams, DatabaseRef, $firebaseArray) { //get all data from firebase database var mydb = DatabaseRef.ref("projects").orderByKey(); $scope.mylist = $firebaseArray(mydb); var data = $scope.mylist; data.$loaded().then(function(data) { console.log(data.length); // data is loaded here, and the length is 9 $scope.tableParams = new ngTableParams({ page: 1, // show first page count: 3, // count per page filter: { name: '' // initial filter } }, { total: data.length, // length of data getData: function ($defer, params) { // use build-in angular filter var orderedData = params.filter() ? $filter('filter')(data, params.filter()) : data; $scope.users = orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()); params.total(orderedData.length); // set total for recalc pagination $defer.resolve($scope.users); } }); }); }]);