How to preset page in Angular-Paging directive

[DenisAlliswell]

Hi!

How I can preset the current page in your directive? For instance, in case if I refresh browser on page 3 I need to load page 3)

I use directive like below:

<paging class="pull-left"
    page="currentPage"
    page-size="numPerPage"
    total="noOfPages"
    show-prev-next="true"
    paging-action="setPage()">
</paging>

Where is setPage() function loads data from db via $http request.

[brantwills]

Hey Denis,

Apologies for the delayed response to an excellent question! In short there are few avenues you could take to make this happen - I'll do my best to explain, let me know if there are any questions.

At the end of the day we just need a way to alert the setPage() method to start with page three rather than page one. The most common way I've seen this accomplished is by placing the page of interest, page three, in the URL, so something like:
mysite.com/index/page/3 or with query strings mysite.com/index.html?page=3

Taking this URL based example, there would need to be some setPage() logic to parse out what page we are interested in. Angular may have a cool way of doing this or you could always fall back on vanilla regex javascript. Further, we would also need the setPage() logic to adjust the URL to reflect when a user goes from page three to page four - allowing them to refresh if they change pages.

Another option would be to lose the setPage() all together and simply adjust the paging directives template to use actual HTML anchor tags rather than an onclick method. For example:

...
/* around line 356 of paging.js - untested!! */
// Assign the angular directive template HTML
template: 
    '<ul ng-hide="Hide" ng-class="ulClass"> ' +
        '<li ' +
            'title="{{Item.title}}" ' +
            'ng-class="Item.liClass" ' +
            'ng-repeat="Item in List"> ' +
            '<a ng-href="mysite.com/index/page/{{item.value}}">{{item.value}}</a>' +
        '</li>' +
    '</ul>',
...

Notice now our paging directive will simply redirect the user to the page of interest. The setPage() method will likely still exist to get the data from the server, but it would run only once when the controller or service or whatever is loaded. That said, things can get messy if you have multiple paging directives for multiple data sources on a single page - ie: you probably wouldn't want all the directives data to be pointing at page three.

I'm not sure there is a straightforward answer to your question but, these are the kinds of things I would investigate if I were in your situation. Let me know how it turns out I would be very interested in baking an option like this into the directive as I'm sure you are not the first person to come across this issue!

[CarCastillo]

Hi,

How can I highlight the page number every time I get the page number via http request?

When I get the response of a specific page I get the correct data but the page number related to that data, the page number doesn't get highlighted.

In the screenshot, I'm displaying in the table results from page 6 via http request, but in my paging control is still displaying page 1.

[DenisAlliswell]

Thank you for your response and support, Brant!

The problem still exists.

When I refresh page with url like mysite.com/index?page=3 it still doesn't get me the to page I need.
Your advice just adds query to the url)

Well, what I have now:

// scope variable represents how many items I need per page
$scope.numPerPage = 10;
// scope variable which represents current page (page number from url query if exists or 1)
$scope.currentPage = angular.isDefined($location.search().page) ? $location.search().page : 1;

// scope function which dynamically loads 10 items per page from DB
$scope.setPage = function() {
    // request to DB is correct (with limit and offset for loading appropriate count of items) 
    // request depends on $scope.numPerPage and $scope.currentPage variables.
    $http.get() ....
}

// trigger of setPage function on currentPage variable changing
$scope.$watch( 'currentPage', function(newValue, oldValue) {
   $scope.setPage();
});

<!-- and finally your beautiful paging directive in use -->
<paging class="pull-left"
        page="currentPage"
        page-size="numPerPage"
        total="noOfPages"
        show-prev-next="true">
</paging>

And all that stuff seems to work, but it doesn't..

Please help me find the core of issue or workaround here!

[optyler]

Strange, it should work, have you add the angular-route.js script too? $location depends on it.
For a demo that works : http://run.plnkr.co/qQWZIgzq6gDmLP8z/#?page=4

[DenisAlliswell]

@optyler $location service works fine.

[CarCastillo]

I have exactly the same issue that @DenisAlliswell, I just tried with $scope.$watch but if failed too.

[brantwills]

Hey guys,

So I took a moment and attempted to build up a sample application using $location
Using the code below I was able to successfully implement a preset paging scheme

Everything seems to work properly. Now, I'm no wizard with $location but hashes appear in the URL, which feels like an angular thing, displaying the URL as something like index.html#?page=3.

When the page loads it properly highlights page three. When the user clicks a different page, say page four, the currentPage changes and the URL updates with page four highlighted. I chose not to include the showPage() paging-action method to avoid confusion and focus on finding any issues with $location.

Let me know if seeing a fork or Plunker would be easier to work with - I might have some time today to get a working sample up to play with.

/**
* @ngDoc module
* @name ng.module:myApp
* 
* @description
* This module is here for sample purposes
*/
angular.module('myApp', ["brantwills.paging"]);



/**
* @ngDoc controller
* @name ng.module:myApp
* 
* @description
* This controller is the same found in app.js
* I've included the necessary $location code for issue #17
* No other javascript has been modified
*/
angular.module('myApp').controller('sampleCtrl',['$scope', '$location', function($scope, $location){

    // Set the paging scope values    
    $scope.numPerPage = 10;
    $scope.noOfPages = 100;
    $scope.currentPage = angular.isDefined($location.search().page) 
        ? $location.search().page 
        : 1;

    // Assign the watch on current page to trace the page of interest
    $scope.$watch('currentPage', function(value){
        console.log('Page Changed To:', value);
        $location.search('page', value);
    });

}]);

<!-- And here is the index.html controller HTML - I was using Angular v1.4.3 -->
<div class="container" ng-app="myApp" ng-controller="sampleCtrl">
    <paging class="pull-left"
            page="currentPage"
            page-size="numPerPage"
            total="noOfPages"
            show-prev-next="true">
    </paging>
</div>

[CarCastillo]

Hi @brantwills, yes I like to work with some Plunker, that would be easier, I have not resolved my issue yet.

[brantwills]

Hey @optyler can you re-post your plunker link from above - I get 404 errors when navigating?
I have a feeling that may help @CarCastillo faster than me making one tonight

[optyler]

Using plunkr for this kind of test may not help cause of the hash... I copy code to codepen and you should open it in debug mode to test it : http://s.codepen.io/optyler/debug/VLVwPj#?page=4 the code is accessible here : http://codepen.io/optyler/pen/VLVwPj?editors=101

[brantwills]

Nice! @optyler you are awesome!!

Alrighty, with that working example, I am going to close out as there does not appear to be any issues with the paging directive and angulars $location.

Please feel free to continue the discussion after closing. I will certainly reopen if any issues come up with the paging directive.

[DenisAlliswell]

Hi @brantwills!

Here's logs of watching @scope.currentPage after refreshing page mydomain.com/index?page=3:

3
3
1

So, the issue is that directive somehow changes page value.
I don't touch it.

[optyler]

Can you create a codepen exemple?
I can't reproduce the issue with my own exemple.
@DenisAlliswell : did you change angular's default routing? I didn't see the hash # in your URL

BTW, I don't think it's a directive issue.

@brantwills : you're welcome! ;)

On Tue, Jul 28, 2015 at 8:17 AM, DenisAlliswell notifications@github.com
wrote:

Hi @brantwills https://github.com/brantwills!

Here's logs of watching js @scope.currentPage after refreshing page
mydimain.com/index?page=3:

6
6
1

So, the issue is about changing page value somewhere in the directive.
I don't touch it.

—
Reply to this email directly or view it on GitHub
#17 (comment)
.

_Et aussi sur _facebook http://www.facebook.com/optyler*\ / flickr
http://www.flickr.com/photos/optyler/\ / *Google+
https://plus.google.com/u/0/109694994098307678378/about / doyoubuzz
http://www.doyoubuzz.com/patrick-ferreira

[DenisAlliswell]

@optyler yep, you are right! My bad. Fixed that!

Thanks guys!