Pagination controls not showing up in ng-table when fetching data from backend Pagination controls not showing up in ng-table when fetching data from backend angularjs angularjs

Pagination controls not showing up in ng-table when fetching data from backend


This happens because the usual $scope.tableParams.reload() function used to refresh the data after an asynchronous data load does not refresh the total item count in the table. It didn't happen before because this value is correctly set at the beginning when you were using dummy data.

You need to add a params.total(data.length); the getData function to manually refresh the value.


For me, it's because I was using coffeescript, which automatically returns the value of the last thing in your function. This causes problems because ng-table's getData() gets back a promise, and if it doesn't get one, it creates one itself, from $defer. By using coffeescript and not quite properly converting the example from the Configuring your table with ngTableParams wiki page, I was returning something that wasn't a promise.

In coffeescript, make sure your callback to getData() ends with either

$defer.promise

or

return

so that ng-table gets a promise, or knows to make one itself.


I found the answer. Actually there is an issue with ng-table when loading dynamic data. When the data is dynamically loaded, the getData function is not called. So this is what I did. I created a refreshTable function to call the setTable function which then calls the getData function and renders the table.

$scope.refreshTable = function () {            console.log('\n\n refreshing table')            $scope['tableParams'] = {                reload: function () {},                settings: function () {                    return {}                }            };            $timeout(setTable, 100)        };        $scope.refreshTable();        function setTable(arguments) {            $scope.tableParams = new ngTableParams({                page: 1, // show first page                count: 10, // count per page                filter: {                    name: '' // initial filter                },                sorting: {                    name: 'asc'                }            }, {                filterSwitch: true,                total: $scope.users.length, // length of data                getData: function ($defer, params) {                    console.log(                        '\n\nngTable getData called now')                    var orderedData = params.sorting() ?                        $filter('orderBy')($scope.users,                            params.orderBy()) :                        data;                    params.total(orderedData.length);                    $defer.resolve(orderedData.slice((params.page() -                            1) * params.count(), params.page() *                        params.count()));                }            });        }