ngTable - 服务器端分页getData错误

时间:2016-07-31 12:42:41

标签: javascript angularjs ngtable

我正在尝试使用ng-table实现服务器端表。但是,当我使用getData时,它会显示$defer.resolve is not a functionparams is not defined

如果params函数中未使用$defer,我可以获得getData

这是我的代码的一部分:

angular.module('ngTableTest', ['ui.router', 'ngTable'])
.controller('Table', function($state, NgTableParams){
   var vm = this;

   vm.niceTable = new NgTableParams({}, {
      getData: function($defer, params) {
        $http.get('/app/getdata')
            .success(function(data) {
               params.total(data.count);
               $defer.resolve(data.data);
            });
        }
      });
});

谢谢!

2 个答案:

答案 0 :(得分:0)

你应该包含$ q来使用$ defer 试试这个

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">
        <img src="img/logo.png" height=30 width=41>
      </a>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#"><span class="glyphicon glyphicon-home"
                     aria-hidden="true"></span> Home</a>
        </li>
        <li><a href="aboutus.html"><span class="glyphicon glyphicon-info-sign"
                     aria-hidden="true"></span> About</a>
        </li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
            <span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span> Menu <span class="caret"></span>
          </a>
          <ul class="dropdown-menu">
            <li><a href="#">Appetizers</a>
            </li>
            <li><a href="#">Main Courses</a>
            </li>
            <li><a href="#">Desserts</a>
            </li>
            <li><a href="#">Drinks</a>
            </li>
            <li role="separator" class="divider"></li>
            <li class="dropdown-header">Specials</li>
            <li><a href="#">Lunch Buffet</a>
            </li>
            <li><a href="#">Weekend Brunch</a>
            </li>
          </ul>
        </li>
        <li><a href="contactus.html"><i class="fa fa-envelope-o"></i> Contact</a>
        </li>
      </ul>
      <form class="navbar-form navbar-right" role="search">
        <div class="form-group">
          <input type="email" class="form-control" placeholder="Email">
        </div>
        <div class="form-group">
          <input type="password" class="form-control" placeholder="Password">
        </div>
        <label class="checkbox-inline">
          <input type="checkbox" name="approve" value="">
          <p class="rememberme">Remember me</p>
        </label>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
    </div>
  </div>
</nav>

答案 1 :(得分:0)

我正在努力解决同样的问题,这是我的解决方案:

angular.module('ngTableTest', ['ui.router', 'ngTable'])
.controller('Table', function($state, $q, NgTableParams){
   var vm = this;

   vm.niceTable = new NgTableParams({}, {

     getData: function(params) {

         var promise =  
           $http.get('/app/getdata')
            .success(function(data) {
               params.total(data.count);

               // here you can do some data manipulation 
               return $q.resolve(data); // this can be skipped if no data manipulation is required
            });
           }
        });
        return $q.resolve(promise); 
});

请注意,在当前版本的NgTable中,getdata只有一个参数,只有params,早先是2,$ defer和params。

似乎getdata需要返回已解决的承诺。在这个问题中,promise是在success方法中解决的,但不是直接在getdata方法中解决的。

无论如何,这是一个有效的解决方案,但只有通过反复试验才能达到解决方案。我希望一些专家能够了解$ q.resolve的工作方式和getdata函数的返回值。