Pagination

[Prateeksha Tiwari]

Hi,

I am getting response from API onkeypress.

I am not able to add pagination using  Angular.Because due to page reload all data get dismiss.

I am using pagination in PHP but onclick page get reload .

Can anybody tell me how to do pagination using Angular JS.

Thank you.

 

[Tony pee]

To load in data in angular, you often use XHR requests. This means that you make a request for the data without reloading the page. If you reload the page, all of your application will need to start again. 

look at https://docs.angularjs.org/api/ng/service/$http

So, you will set up an endpoint which can serve different pages of data, and then based on interacting with your application (single page angular app) the load in the data, and display it. 

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

--

Tony Polinelli

[Prateeksha Tiwari]

Hi Tony,

Thanks for your response.

But i didn't understand that .

We are using angular on keypress it will fetch data from catsAPI in the form XML there we will get number of rows count.

with the help of tjis row count i am able to do pagination properly but due to page reload all data  get lost :(

Thanks

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/fWI8lsDxaW0/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.

[Nicholas Smith]

When your page loads you should initialize values such as "current_page" based on URL parameters.  You'll also need to update those URL parameters when the user is paging through data to keep the URL in sync with what's actually on screen.  Then if the user hits "Refresh" the page will load back to the correct state.

This is how I'm handling it:

In my html template whenever the user needs to navigate for example to the next page, I'll call an action on my controller, similar to this:

<a ng-click="gotoPage(currentPage+1)">Next Page</a>

In my controller, I'll initialize page based on the URL using $location.search() to pull the current value. It's passed in as "page" in the url. My url looks like "http://site.com/app/#/somelist?page=5" when user is on page 5 of results:

$scope.pager.currentPage = $location.search().page != null ? $location.search().page : 1; // default to page 1 if not specified

Then my gotoPage function looks like this:

$scope.gotoPage = function(pageNum) {

  $scope.pager.currentPage = pageNum; // update content on screen

  $location.search({page: $scope.pager.currentpage}); // update URL with new current page

}

This works, when user pages data the new page number gets saved in the URL.  When page is first visited, with no page= in the URL parameters, it defaults to 1.  If user pages around and refreshes, it captures the current "page" back from the URL parameter and uses that to populate the initial view.  

If you have other values you can also add them to your $location.search(...) call, and read them back in when page is loaded as I did with currentPage above.  My screen has several search fields and filters that are also tracked as the user navigates the results.  This has worked well for me.

Nick