angularjs ng-table is not showing data on returning to listing

angularjs ngtable
map7 picture map7 · Feb 11, 2014 · Viewed 8.1k times · Source

I'm using AngularJS 1.2.10 stable with a Rails project and I'm trying to get ng-table working with my data and nothing is showing up.

I've included the ng-table files and included it in my angular module. I'm getting data when I refresh the page, but if I navigate away from this view, then back again within the single page app it's not loading the data. ie: Refresh the browser on the listing and all the data is there, I go to view an individual item and I'm taken to a new page (via angularJS routing) then I return to the listing (via angularJS routing again) and the data is empty/there is no listing.

Here is my table

<table ng-table="tableParams" class="table">
  <tr ng-repeat="debtor in debtors">
    <td data-title="'Code'" sortable="'code'">{{debtor.code}}</td>
    <td data-title="'Name'" sortable="'name'">{{debtor.name}}</td>
    <td>
      <a href="/api#/clients/{{debtor.id}}">Show</a>
      <a href="/api#/clients/{{debtor.id}}/edit">Edit</a>
      <a href="" ng-confirm-click="destroy(debtor.id)">Delete</a>
    </td>
  </tr>
</table>

Here is my controller where I get my data.

app.controller "DebtorsController", ['$window', '$scope', '$http', '$location', '$state', '$stateParams', '$modal', '$timeout', 'flash', 'Common', 'Debtor', 'Client', 'ngTableParams', '$filter', ($window, $scope, $http, $location, $state, $stateParams, $modal, $timeout, flash, Common, Debtor, Client, ngTableParams, $filter) ->

  # --------------------------------------------------------------------------------
  # Initialise
  # --------------------------------------------------------------------------------
  $scope.debtors = {}

  # --------------------------------------------------------------------------------
  # Index
  # --------------------------------------------------------------------------------
  if $state.current.name == "debtors"
    Debtor.query {},
      (data) ->
        # Define ng-table params
        $scope.tableParams = new ngTableParams({
          page: 1,
          total: data.length,
          count: 10
        })

  # --------------------------------------------------------------------------------
  # Index
  # --------------------------------------------------------------------------------
  if $state.current.name == "debtors"
    $data = []
    Debtor.query {}, (response) -> $data = response
    console.log "debtors index"

    $scope.tableParams = new ngTableParams({
      page: 1,
      count: 10,
      sorting: { name: 'asc'}
    }, {
      total: $data.length,
      getData: ($defer, params) ->
        console.log "run deferred"
        orderedData = (if params.sorting then $filter('orderBy')($data, params.orderBy()) else $data)
        $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()))
    })

I can see in chromes console that it's calling

XHR finished loading: "http://localhost:3000/assets/layouts/default.html.erb". angular-min.js?body=1:1825
XHR finished loading: "http://localhost:3000/assets/debtors/index.html.erb". angular-min.js?body=1:1825

debtors index  

ngTable: set settings 
Object {$scope: null, $loading: false, data: null, total: 0, counts: Array[4]…}
 angular-min.js?body=1:2147
ngTable: set parameters 
Object {page: 1, count: 10, filter: Object, sorting: Object, group: Object…}
 angular-min.js?body=1:2147
XHR finished loading: "http://localhost:3000/debtors". angular-min.js?body=1:1825
XHR finished loading: "http://localhost:3000/assets/debtors/_listing.html.erb". angular-min.js?body=1:1825
ngTable: reload data angular-min.js?body=1:2147
ngTable: current scope 
$get.h.$new.a {$id: "006", this: $get.h.$new.a, $$listeners: Object, $$listenerCount: Object, $parent: $get.h.$new.a…}
 angular-min.js?body=1:2147

run deferred

ngTable: reload data angular-min.js?body=1:2147
ngTable: current scope 
$get.h.$new.a {$id: "006", this: $get.h.$new.a, $$listeners: Object, $$listenerCount: Object, $parent: $get.h.$new.a…}
 angular-min.js?body=1:2147

(I clicked on 'show' for one of the items)

XHR finished loading: "http://localhost:3000/assets/clients/show.html.erb". angular-min.js?body=1:1825
XHR finished loading: "http://localhost:3000/clients/2". angular-min.js?body=1:1825
XHR finished loading: "http://localhost:3000/locations.json". angular-min.js?body=1:1825

(I clicked on 'listing' which takes me back to the debtors listing)

debtors index

ngTable: set settings 
Object {$scope: null, $loading: false, data: null, total: 0, counts: Array[4]…}
 angular-min.js?body=1:2147
ngTable: set parameters 
Object {page: 1, count: 10, filter: Object, sorting: Object, group: Object…}
 angular-min.js?body=1:2147
ngTable: reload data angular-min.js?body=1:2147
ngTable: current scope 
$get.h.$new.a {$id: "017", this: $get.h.$new.a, $$listeners: Object, $$listenerCount: Object, $parent: $get.h.$new.a…}
 angular-min.js?body=1:2147

run deferred

ngTable: reload data angular-min.js?body=1:2147
ngTable: current scope 
$get.h.$new.a {$id: "017", this: $get.h.$new.a, $$listeners: Object, $$listenerCount: Object, $parent: $get.h.$new.a…}
 angular-min.js?body=1:2147
XHR finished loading: "http://localhost:3000/debtors".

On returning to the debtors listing it is not calling these two lines:

XHR finished loading: "http://localhost:3000/debtors". angular-min.js?body=1:1825
XHR finished loading: "http://localhost:3000/assets/debtors/_listing.html.erb". angular-

I think it has to reload the data, not so much the template though as I can see that.

Answer

map7 picture map7 · Feb 12, 2014

Noticed that I had to go and get the data withing the getData part of ngTableParams and wait for it to successfully return with my data before applying the filter and handing it back to be rendered.

  # --------------------------------------------------------------------------------
  # Index
  # --------------------------------------------------------------------------------
  if $state.current.name == "debtors"

    # Setup ng-table with defaults and data
    $scope.tableParams = new ngTableParams({
      page: 1,
      count: 10,
      sorting: { name: 'asc'}
    }, {
      total: $data.length,
      # ng-table will ask for updated data, this is where it gets it from.
      getData: ($defer, params) ->
        Debtor.query {}, (response) ->
          $data = response
          console.log 'run deferred'
          orderedData = (if params.sorting then $filter('orderBy')($data, params.orderBy()) else $data)
          $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()))
    })

Related questions

Trying to center align button in td

I'm having trouble centering a button in a td. This is probably a simple CSS issue, but the app is using bootstrap, AngularJS, AngularJS-ui-bootstrap, and ngTable. I've included all of these components in my plunkr. I'm trying to set "horizontal-align: …

Read More
How to reload angularJs ng-table

I have an ng-table. I have multiple ng-tables inside one controller. I am giving dynamic attributes i.e. ng-table="tableParams2" or ng-table="tableParams3" etc. to them. I am making an ajax request on button click function to update the data. …

Read More
AngularJS ng-table fixed headers

I'm using ng-table to display some information. I would like to make the header and footer of the ng-table fixed and force the ng-table to draw scroll bars within the rows. The ng-table documentation site has no documentation on how …

Read More