AngularJS ngTable doesn´t trigger getData method using http call

Question

I am trying to use ngTable with angularJS.

I have installed all angular staff and It´s works well.

Now, I need to use ngTable.

I am using the next code but my http get is never triggered.

What am I missing here?

My code:

angular.module('clinang', ['ngTable']).controller('pacientesCtrl', function($scope,$http,NgTableParams){
  this.tableParams = new NgTableParams({
    page: 1,
    count: 10
  }, {
    getData:  function($defer, params) {
      $http.get('/getdadospac/?oper=S', {params: {
        pageNumber:params.page() - 1,
        rangeStart:rangeStart,
        rangeStop:rangeStop}})
      .then(function(data, status) {

        params.total(data.results.total);

        $defer.resolve(data.results);
      });
    }
  });


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<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>
<body ng-app="clinang">
  <div ng-controller="pacientesCtrl">
    <a class='btn btnprimary' href='/getdadospac/?oper=S' >Button</a> 
    <table ng-table="vm.tableParams" class="table" show-filter="true">
      <tr ng-repeat="paciente in $data">
        <td title="'Pront'" filter="{ name: 'text'}" sortable="'pront'">
          {{paciente.pront}}</td>
        <td title="'Nome'" filter="{ age: 'number'}" sortable="'nome'">
          {{paciente.nome}}</td>
      </tr>
    </table>
  </div>
</body>

Also I don't know ngTable but I found weird that you define a function called getData() but it's never called in your code (Maybe a ngTable feature though) — Tonio
– Tonio, Commented Feb 7, 2017 at 16:13
@Pankaj Parkar I have defined ng-app. I only don´t poste for brevity. — Luiz Alves
– Luiz Alves, Commented Feb 7, 2017 at 16:40

andrepaulo · Accepted Answer · 2017-02-07 17:20:13Z

1

If you use the reload() method after the creation of the control, it gonna work.

You're also using .success but for $http you have to use .then method.

I put a debugger call inside the getData, so if you open your DevTools, you can see that it'll be executed.

angular.module('clinang', ['ngTable']).controller('pacientesCtrl', function($scope,$http,NgTableParams){
  this.tableParams = new NgTableParams({
    page: 1,
    count: 10
  }, {
    getData:  function($defer, params) {
    debugger;
      $http.get('/getdadospac/?oper=S', {params: {
        pageNumber:params.page - 1}})
      .then(function(data, status) {

        params.total(data.results.total);

        $defer.resolve(data.results);
      });
    }
  });
    this.tableParams.reload();


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<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>
<body ng-app="clinang">
  <div ng-controller="pacientesCtrl">
    <a class='btn btnprimary' href='/getdadospac/?oper=S' >Button</a> 
    <table ng-table="vm.tableParams" class="table" show-filter="true">
      <tr ng-repeat="paciente in $data">
        <td title="'Pront'" filter="{ name: 'text'}" sortable="'pront'">
          {{paciente.pront}}</td>
        <td title="'Nome'" filter="{ age: 'number'}" sortable="'nome'">
          {{paciente.nome}}</td>
      </tr>
    </table>
  </div>
</body>

edited Feb 7, 2017 at 17:20

answered Feb 7, 2017 at 16:47

andrepaulo

8161 gold badge11 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

andrepaulo Over a year ago

you have to pass that object so it can be seen inside

andrepaulo Over a year ago

Luis you're also using .success for $http, you need to change for .then, I added to the answer!

Luiz Alves Over a year ago

Thank you, but could show how to pass the param object?

Dudi Over a year ago

Try: this.tableParams.Params.reload();

Collectives™ on Stack Overflow

AngularJS ngTable doesn´t trigger getData method using http call

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related