Question

目前我正致力于Smart-table.js，需要以下功能

从Web服务中读取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视图中的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);

  })
}
}

});

Answer 2

当使用st-safe-src指令时，st-safe-src应该接收完整的集合，而st-table接收displayedCollection，这是你在plunker中完成的过滤，排序和分页结果。但是，当使用ng-repeat显示行时，您必须迭代displayedCollection（传递给st-table的行），因为传递给st-safe-src的原始集合永远不会被智能表修改。

<tr ng-repeat="row in displayedCollection">

Smart-table.js：分页和过滤无法正常工作

2 个答案: