CODEWITHSUNDEEP
angularjsfilterpaginationngtable
Stéphane
Stéphane

Reputation: 442

AngularJS: display item number problems, using filter and ngtable pagination

I am using NG-table to display filtered data but I encountered problem with the pagination.

This is the construction:

HTML:

<li ng-repeat="(type, value) in winetypes">
    <input type="checkbox" ng-model="winetypes[type]"/> {{type}}
</li>



<ul>
    <li ng-repeat="wine in data | winetypefilter:winetypes">
        {{wine.name}} is a {{wine.type}} with {{wine.style}} style from {{wine.country}}
    </li>
</ul>


<p><strong>Page:</strong> {{tableParams.page()}}</p>

<p><strong>Count per page:</strong> {{tableParams.count()}}</p>

<table ng-table="tableParams" class="table">
    <tr ng-repeat="user in filtered = ($data | winetypefilter:winetypes)">
        <td data-title="'Name'">{{user.name}}</td>
    </tr>
</table>

The filtering, and the pagination are working fine, but if the red checkbox is checked (red wines), all the filtered red wines appears inside a classic list (not linked to ng-table).

Normally inside the table created by ng-table, in each page it should appears 10 items, but it´'s not the case (see the image below)

Here the demo: http://plnkr.co/edit/9xTdaQ2bTfY0jQpZAL1T?p=preview

capture screen

What is the way to solve this problem??

Upvotes: 1

Views: 1152

Answers (1)

Jerrad
Jerrad

Reputation: 5290

Your data is being filtered after it is paged, which is why you aren't seeing 10 items in the grid. You want to filter the data first, and then page it. Filter the data in the controller instead of the view:

getData: function($defer, params) {
   var filteredData = $filter('winetypefilter')(data, $scope.winetypes);
   $defer.resolve(filteredData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
}

HTML

<tr ng-repeat="user in filtered = ($data)">

Since you aren't using the filter system that is built-in to ngTable, you need to manually refresh the data when the filter changes:

$scope.$watch("winetypes", function(newvalue, oldvalue) {
  $timeout(function(){
    $scope.tableParams.reload();
  });
}, true);

This guy is doing something very similar to what you are doing.

Plunker Demo

Upvotes: 1

Related Questions