Smart-table.js: разбиение на страницы и фильтр не работают

В настоящее время я работаю над 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'}
    ];
    
    
}])

Но я не получаю ожидаемого результата (разбиение на страницы и фильтр не работают). Может ли кто-нибудь предложить мне решение, пожалуйста?


javascript pagination angularjs smart-table
person Pragati Deshmukh    schedule 04.09.2015    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Если вы удалите строку scope.displayedCollection и установите для коллекции просто rowCollection в представлении html, она будет работать нормально. Проверьте Планкр.

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);

  })
}
}

});
person dmontooth    schedule 04.09.2015
comment
страницы разбиения на страницы не отображаются, и когда я что-то набираю в глобальном поиске, он фильтрует правильно, но когда я очищаю весь текст, то отображаются не все записи. - person Pragati Deshmukh; 05.09.2015
comment
Я вернулся, еще раз посмотрел и заметил, что вы устанавливаете st-table для displayCollection, но используете ng-repeat для rowCollection. Если вы измените это, ваш исходный код будет работать. Plunkr - person dmontooth; 21.09.2015

arrow_upward
0
arrow_downward

При использовании директивы st-safe-src st-safe-src должен получить полную коллекцию, в то время как st-table получает отображаемую коллекцию, которая представляет собой отфильтрованный, отсортированный и разбитый на страницы результат, как вы сделали в своем плункере. Однако при отображении строк с помощью ng-repeat вам необходимо выполнить итерацию по отображаемой коллекции (той, которая передана в st-table), поскольку исходная коллекция, переданная в st-safe-src, никогда не будет изменена смарт-таблицей.

<tr ng-repeat="row in displayedCollection">
person Eirik.bell    schedule 18.09.2015