How to Paginate dynamic AngularJS table?

Question

How do I get pagination with ng-table-dynamic and $http working?

HTML specification of the table is

<table class="table-bonds table table-bordered table-hover table-striped"
   export-csv="csv"
   separator=","
   show-filter="true"
   ng-table-dynamic="bondsTable.bondsDataParams with bondsTable.bondsDataCols">
<tr ng-repeat="row in $data">
    <td class="hand"
        ng-repeat="col in $columns">{{::row.node[col.field]}}</td>
</tr>

The table creation code is:

self.bondsDataParams = new NgTableParams({
    page: 1, // show first page
    count: 5 // count per page
  }, {
    filterDelay: 0,
    total: 0,
    getData: function (params) {
      return $http(bondsDataRemote).then(function successCallback(response) {
        // http://codepen.io/christianacca/pen/mJoGPE for total setting example.
        params.total(response.data.nodes.length);
        return response.data.nodes;
      }, function errorCallback(response) {

      });
    }
  });

AngularJS 1.5.8

Answer 1

This is an excellent directive for pagination have a look at it . It has lots of options and its easy to use.

Answer 2

The main problem was mixing up loading the data via ajax and not supporting the filtering/pagination on the server side of the request.

Either provide all the data up-front so that the table can filter, or fully support the pagination, sorting and filtering on the server side.

Option 1. Load the data before hand. I used this option because my dataset is not that big and it seemed like the easiest way to allow people to use all the permutations of filtering sorting and downloading.

No total value is required here. The data is all loaded.

var Api = $resource('/green-bonds.json');

// Or just load all the data at once to enable in-page filtering, sorting & downloading.
Api.get({page: "1", count: "10000"}).$promise.then(function (data) {
   self.bondsDataParams = new NgTableParams({count: 25}, {
      dataset: data.results
    })
}); 

Or fully support the lazy loading data API and set total. Uses getData: rather than just setting dataset.

var Api = $resource('/green-bonds.json');

this.bondsDataParams = new NgTableParams({}, {
    getData: function (params) {
      return Api.get(params.url()).$promise.then(function (data) {
        params.total(data.count);
        return data.results;
    });
  }
});

Note 1: By default $resource expects an object .get() for object, .query() for array. Also see isArray:. I didn't get this to work.

Note 2: params.url() provides $resource with the ng-table params. eg {page: "1", count: "10"}