javascript - 智能表.js : pagination and filter not working

Question

目前我正在研究 Smart-table.js ，需要以下功能，

• 从网络服务中读取 JSON 数据
• 创建带分页和过滤器的表格
• 过滤器可以在单列或全局上

我阅读了 Smart-table.js 的所有文档并根据我的要求创建了示例，可在 Plunker 中找到。

angular.module('myApp',['smart-table'])
.controller('MainCtrl',['$scope','$http',function(scope,http)
{
    scope.rowCollection = [];
    http.get("https://api.myjson.com/bins/mr6e")
    .success(function(response) 
    {
        scope.rowCollection=response.d;
    });
    scope.displayedCollection = [].concat(scope.rowCollection);
    scope.itemsByPage=5;
    
    scope.columnCollection = [
        {label: 'Member ID', map: 'memberID'},
        {label: 'Member Name', map: 'memberName'},
        {label: 'Date Time', map: 'dateTime'},
        {label: 'Balance', map: 'balance'}, 
        {label: 'Amount', map: 'amount'},
        {label: 'Remarks', map: 'remarks'}
    ];
    
    
}])
     

但我没有得到预期的输出(分页和过滤器不工作)。请问有人可以建议我解决方案吗？

Answer 1

如果您删除 scope.displayedCollection 行并将集合设置为 html View 中的 rowCollection，它将正常工作。查看 Plunkr。

Plunkr

angular.module('myApp',['smart-table'])
    .controller('MainCtrl',['$scope','$http',function(scope,http)
    {
        scope.rowCollection = [];
        http.get("https://api.myjson.com/bins/mr6e")
        .success(function(response) 
        {
            scope.rowCollection=response.d;
        });
        scope.itemsByPage=5;

        scope.columnCollection = [
            {label: 'Member ID', map: 'memberID'},
            {label: 'Member Name', map: 'memberName'},
            {label: 'Date Time', map: 'dateTime'},
            {label: 'Balance', map: 'balance'}, 
            {label: 'Amount', map: 'amount'},
            {label: 'Remarks', map: 'remarks'}
        ];


}])
.directive('stExport',function(){
  return {
      require:'^stTable',
      link:function(scope, element, attr,ctrl){
      element.bind('click',function(){
      alert(ctrl.getFilteredCollection().length);

  })
}
}

});