Does it work with tables?

[janega]

Take a look at my plunker http://plnkr.co/edit/VWbJJ4GSVPxRzjcv2FG9?p=preview What am I doing wrong here? If I set the current-page it seems to work but then it seems that is used for asynchronous data and I am not doing that here. Is there a way I can set the current-page and feed it a new page value once a new number is clicked on the control with out have to get new data for the page?

[michaelbromley]

Hi,

Thanks for putting together the demo. There are 2 issues:

First, this bit:

<tr  ng-controller="myCtrl" dir-paginate="user in users | filter:searchText | itemsPerPage:25" pagination-id="client.user"> 

Since you declare ng-controller on the repeating element, it means that your controller will be instantiated newly many times as the row repeats. You can see this by console logging something from your controller. You should put the ng-controller up higher in the DOM so that it encompasses both the title and the table. E.g. if you move it up to the tag it works fine.

Secondly, this is in fact an example of async. The fact that you use the $http service to make a call for some external json file shows this. The location of the json file doesn't matter (whether on a remote server or local) - it will still be an async operation.

Use the current-page attribute. As you noticed, it will then work as expected.

[janega]

Hi Michael,

Thanks removing the controller did help but you still need to set the current page and define a pageChanged function. I would disagree that this is async because the data is fetched all at once in this instance and a call to retrieve more data is not happening. What is odd is that I have used this directive with list elements and this does not seem to be an issue. When using with a table you have to set a current page and define an empty pageChanged function. Otherwise you have to click on a page to get the control started. New plunk http://plnkr.co/edit/VWbJJ4GSVPxRzjcv2FG9?p=preview.

Thanks a lot for the this directive by the way. It really is great work and I really really appreciate the response.

[brankoiliccc]

Hello, i do have one small issue with dirPagination.js in tables
here is my code :

tr id="accountAdd{{ oglas.id }}" data-dir-paginate="oglas in korisnik.listaKorisnikovihOglasa | filter:q | itemsPerPage: pageSize" data-current-page="currentPage">

Everything is working fine, but i do have one or two sec pause during load when this error pop-ups in my console.

TypeError: b.setAttribute is not a function
at r.attr

error is not related to pagination buttons, since when i remove them, error is still there.
Im using /2.1.4/jquery.min.js , 1.3.15/angular.min.js this happens in both chrome and firefox.

Do you have any suggestions? Also i do want to thank you for this wonderful module.

Cheers,
Branko

[michaelbromley]

@janega Thanks for the updated plunk. When I get time I'll look into why it does not load without the currentPage attribute being set. For now, I would suggest you just set it, since I can't tell you when I'll be able to fix the behaviour.

@brankoiliccc Hi, what browser? Can you reproduce it in a Plunker? Also - a hint for future - it's best to open a brand new issue rather than piggy-back on an existing one (unless your issue is the same thing). This makes it easier for me to track whether something is fixed or now, and makes it less likely that I will lose your issue amongst all the others.

[michaelbromley]

@janega Had time to look into this. Some pretty interesting findings.

With your plunk, you specify the pagination-id as "client.user". However there is no $scope.client.user defined in the controller, so the literal value client.user is taken to be the id. The literal string "client.user" is then passed to Angular's $parse service, which tries to interpret it as an object due to the period, and of course this then evaluates to undefined, leading the directive to start on page undefined, and only changing to page 1 after the first click.

To demonstrate the above, you can try either of the following:

1. Define an object in your controller which can be parsed as the pagination id, e.g. $scope.client = { user: 'foo' };
2. Change the pagination-id to a valid identifier (no periods, no hyphens) e.g. pagination-id="foo".

Either of those should fix the immediate issue.

I will also try to fix the code to be smart enough to detect this situation and make it "just work" anyway.

[janega]

Awesome thanks for the fix I will remember not to use periods or hyphens.