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

Question 1

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.

Question 2

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.

Question 3

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

Question 4

I had this problem and applied solution provided here but it not solved my problem.My usage was like below

    <table ng-table="tableParams" class="table  ng-table table-striped"  show-filter="{{::showFilter}}">
        <tr ng-show="showHeaders">
            <th class="th-select" ng-repeat="column in columns">{{column.title}}</th>
        </tr>
        <tr ng-repeat="row in $data">
            <td ng-repeat="column in columns"  ng-show="column.visible" sortable="column.field" ng-click="save(row)">
                {{row[column.field][column.subfield] || row[column.field]}}
                <span compile="column.getValue()" ></span>
            </td>
        </tr>
    </table>

and after one day effort I understand that the problem is using css class "ng-table" . I mentioned this to save your time so other than adding

params.total(data.length)

you should check your css too and the working code is :

    <table ng-table="tableParams" class="table   table-striped"  show-filter="{{::showFilter}}">
        <tr ng-show="showHeaders">
            <th class="th-select" ng-repeat="column in columns">{{column.title}}</th>
        </tr>
        <tr ng-repeat="row in $data">
            <td ng-repeat="column in columns"  ng-show="column.visible" sortable="column.field" ng-click="save(row)">
                {{row[column.field][column.subfield] || row[column.field]}}
                <span compile="column.getValue()" ></span>
            </td>
        </tr>
    </table>

Question 5

I had the same experience with loadData + asynchronous load. On my side the problem was that the data returned by the API was an array of 2 other arrays meanwhile I was using only 1 of the 2 for my table. See below:

*.js

return $http(options).then(function (resp) {
        params.total(resp.data.users.length)
        return resp.data
    }

*.html

 <tr ng-repeat="row in usrCtrl.servicesTable.data.users" ng-if="row.Services.hasOwnProperty(usrCtrl.selectedService)">

By returning "resp.data.users" on javascript side and correctly looping on "usrCtrl.servicesTable.data" on html side then the pager appeared!

Loïc