Pagination in angularjs using bootstrap.

[Deeksha Sharma]

Hello Everyone,

I am trying to implement  pagination  but unable to do this .Can anybody give me a good link for understanding the concept of pagination in angularjs.

Thanks in advance.

[Marc Loupias]

Hi,

you should use angular-ui pagination directive (
http://angular-ui.github.io/bootstrap/#/pagination )

At this point, pagination can be server-side or client-side.

It is client-side when all the data are loaded in the client and the
client paginate from there.

It is server-side when the client queries only the needed data for the
selected page. I have done something on that on my PoC Play/Angular.

Demo is here : http://poc-angular-frontend.herokuapp.com (you may need
to reload website (F5) after trying to login because of heroku proc
sleeping)

Login, then go to "recherches" then to "départements" and you will have
a pagination demo.

Backend source code is here :
https://github.com/MarcLoupias/poc-play-rest-backend

Frontend source code is here :
https://github.com/MarcLoupias/poc-angular-frontend


Marc.

[Todd Adams]

I wrote a pagination directive, that has a model and service with it.  Here is the jsfiddle.   http://jsfiddle.net/k49rD/

Todd

[Lorenzo Bugiani]

I wrote a pagination plugin too. In my case i wrote a simple  filter, and used ui bootstap to paginatd through results... Later if you want I can share my code (I'm at work now)

--
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.

[Lorenzo Bugiani]

Here it is my pagination filter: I've used this filter in combination with Ui bootstrap to paginate an array of data.

https://github.com/canemacchina/devpedia-ng-utils

Simply pass to pagination filter the current page number (starting from 1) and the number of element per page, and it will show only the choosen page.

to create a navigation for the pages, you can use whatever you want. I've used THIS

Bye!

Il giorno mercoledì 19 marzo 2014 17:24:52 UTC+1, Lorenzo Bugiani ha scritto:

I wrote a pagination plugin too. In my case i wrote a simple  filter, and used ui bootstap to paginatd through results... Later if you want I can share my code (I'm at work now)

Il 19/mar/2014 17:14 "Todd Adams" <todd....@kurtosys.com> ha scritto:

I wrote a pagination directive, that has a model and service with it.  Here is the jsfiddle.   http://jsfiddle.net/k49rD/

Todd

On Tuesday, 18 March 2014 07:30:22 UTC, Deeksha Sharma wrote:

Hello Everyone,

I am trying to implement  pagination  but unable to do this .Can anybody give me a good link for understanding the concept of pagination in angularjs.

Thanks in advance.

--
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+unsubscribe@googlegroups.com.

[Edmund Chan]

 Hello,

Just wanted to say thanks for this bit of code.  I hope you can point me in the right direction in using it.

I'm a programmer, but not a JS progammers so I'm having a bit of trouble figuring out where things go.

I hope you don't mind, I would like to ask a few questions.

I'm looking at this code but I think it looks like maybe it is for Client side pagination.  I don't see any $http call.  Is that correct?  If yes, am I wrong in thinking it would NOT be hard to convert to pull from a backend restful server?  Maybe add the $http call?

At any rate, maybe it will help me even if it is just for Client pagination.  I just need to understand a bit more about it.

I have a Laravel app that is working all in PHP.  I want to make an API and would like to use ANGULAR for the front end to talk to the API.

I currently have an ANGULAR frontend that is working.  It pulls JSON data from the backend and I can display it with ANGULAR, but I need pagination.

The way I have MY EXISTING CODE is like this:

--------------------------------------------

index.php  -- This is called when I hit the Restful Route.  It is a regular PHP file.  with my markup in it and a JS src link to main.js.

--

main.js -- This is where I have my current Controller code and it is linked to from my index.php file.  It makes the AJAX call to the Restful backend.

--

MyController.php -- This is the Laravel PHP Controller that my main.js (ANGULAR Ajax controller)  pulls data from.

I don't believe MyController.php needs any changes really.

=========

This code in the top window on JSFIDDLE with HTML and the ANGULAR directives is basically what I have in my index.php.  Of course there is all the regular html markup and a <link...> to my main.js in my code.  This is no problem.  I understand it.

------------------------------------

So my question is this.  Where would the code under this heading go?

/*****************************************************************

 *   ANGULAR APPLICATION

 ******************************************************************/

And where would the code under this heading go?  Could I put an AJAX call where the 

"new Array()" line is so I can pull Server based paginated data?

If so, how should I inject $http?  Would I just put it in the "function" call after the factory declaration line or would this just not work with what you have?

/*****************************************************************

 *   ANGULAR EXPOSED ITEM SERVICE

 ******************************************************************/

This next bit of code under the following heading I believe is very much like my main.js (ANGULAR Controller) that is "linked" to from index.php.  So my main.js is where my Controller code currently is.  So this should replace my main.js.  Is that correct?

/*****************************************************************

 *   ANGULAR EXPOSED MY APPLICATION CONTROLLER

 ************************************

Once again, thanks for the code and thanks in advance for any info or help you can provide.

Edmund

[Todd Adams]

Edmund:

 

Take a look at http://jsfiddle.net/toddbadams/yYD7K/

 

It is a more complete pagination model/service that I put together to demonstrate server side pagination.  Line 161 is a function called bind, where you pass it a paging object and a request.  This then calls the request function when things change.  The request function can be anything you would like, for example it calls $http.  Hope this helps.

 

Todd

--
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/Q1vLnx6aUNQ/unsubscribe.
To unsubscribe from this group and all its topics, 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.

..

[Edmund Chan]

Hi Todd,

Unfortunately, I'm not very good with JS yet and I'm completely confused by what you said I needed to do compared to what I see in the code.

I've been trying to figure out how to use this, but I still don't understand it I guess, so I hope you don't mind me asking some questions again.

When I look at the code, it looks like maybe I should be changing this and making an $http.get call in that function requesting the start and limit that it wants returned :

-----------------------------

 get: function (start, limit) {

                    var _i, _items = new Array();

                    for (_i = start; _i < start + limit; _i += 1) {

                        _items.push({ id: _i, name: 'item ' + _i });

                    }

                    return {

                        items: _items,

                        start: start,

                        limit: limit,

                        total: _total

                    };

                },

BUT, when I read what you said, it seems like you are saying something completely different.

I don't understand.

Am I even close to what you are talking about or is there any way I could get an example of how I would use that to make that $http call?

Thank you so much in advance for any further help with this, I really hope I can get it working so I can use it.

Edmund

[Edmund Chan]

Oh.. let me clarify something.. 

I'm confused because it seems like you are saying that I just need to make a function that makes the $http call and pass that as the request something like this:

------------

Where it currently is like this:

--------

PagingService.prototype.bind = function (pagingVO, request)

It seems like you are saying should just need to be changed like this:

PagingService.prototype.bind = function (pagingVO, myFunction)

So, that has to do with some of my confusion.

Edmund

[Raghavendra yemul]

Hi You can use ng-grid and bs-table to implement pagination thorugh server side json data .