DirPaginate: Update pagination on change data array

[stefanKuijers]

Hey Michael,

Thanks a million for this directive it is amazing.

I'm using this directive in a custom table directive that I wrote. Items in the table can be deleted and new items could be added by the user. Now when I delete or add an items the pagination does NOT update by itself. I might be missing something but as far as I can see I can't refresh the pagination with the current options.

Down to the question: Is the currently a way to update the pagination once the data array changes?

For all clearity. In the following example 'items' would be what I mean with data array:

<li dir-paginate="item in items | itemsPerPage: 10">{{ item }}</li>

[michaelbromley]

Hi,

When you say "refresh", do you mean that the collection length has not changed, but the contents themselves have changed?

As far as I am aware (and I just tested it out in plunker (http://plnkr.co/edit/jcQ6jFq6oGOn1VlUnoYl?p=preview), if you change the collection, it should update automatically.

This of course assumes that any changes made are done within the Angular digest cycle. That is to say, if your collection is modified by some code external to Angular, then you might have to call a $scope.$apply(); to force Angular to check the changes.

If none of that helps, please get back to me with more specifics of what you are trying to do.

[stefanKuijers]

Thanks for the reply.

Sorry, 'refresh' might have caused misunderstanding.

Let's take deleting an item as an example. The fact is when you delete an item the length of the collection does change. But When I have 5 items per page and I delete one I am left with 4 items.

What I would like is that the whole pagination would update/refresh. This means that the new collection length would show and the pages would be calculated again.

Editing of items is no problem. The changes show. My question concerns deleting or adding to the collection / data array.

[michaelbromley]

Hi,

The desired behaviour you describe is how the module behaves, or at least should behave. Do you have example code where it doesn't do this? Or even better, put it in a plunker so I can see it myself?

[stefanKuijers]

I have made a plunker and as you say it works very well.
http://plnkr.co/edit/McxUKO6l3qwcqt6SSIdq?p=preview

What i just realized when I was writing this code is that I work with a logical deletion in my project. So when you click delete. I have made a plunker of that here:
http://plnkr.co/edit/ix5aYpXVxtr7DpGvs5Se?p=preview

Is there a way you can say to the pagination to exclude items based on properties? In this example I would want the pagination to ignore the item when item.deleted = true. I understand this might be beyond the scope of this plugin but advice would be greatly appreciated. I am willing to contribute as well if this behoviour is desired in your plugin

[michaelbromley]

Okay I see why you were getting that unexpected behaviour. You are correct in that this a an Angular-related issue rather than something specific to this module.

Here is how I would handle this: instead of an ng-if on the deleted property, you could add an additional filter using a custom predicate function:

<li dir-paginate="meal in meals | filter:deletedFilter | filter:q | itemsPerPage: pageSize" current-page="currentPage">
    <span class='delete-me-btn' ng-click="deleteMe(meal)">x</span>     <span>{{meal.value}}</span>
</li>

// controller
$scope.deleteMe = function(item) {
    item.deleted = true;
}

$scope.deletedFilter = function(item) {
    return !item.deleted;
};

Demo: http://plnkr.co/edit/Pl3BHqhngjxftzzrkEbC?p=preview

[stefanKuijers]

Thanks for the idea. I completely agree with solving it outside of the plugin. Thanks for your time!

[pushpa-datametica]

Hi,
I have a requirement to show entries as below
"showing 21 - 40 of 144 results"
could you please tell me how to do that?

[evandersar]

"The three range values can be used to generate a label like "Displaying 16-20 of 53 items"."

https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination#writing-a-custom-pagination-controls-template