AngularJS dynamic table - RESTfull data

Question

I have a big data portion that I would like to post in a table. However, the data should be sorted and paginated. I know I am able to pass the whole data to the client at once and then paginate it using angular, but this will be too slow. I prefer to pass the data page-by-page, so one the client want to open a page from a table to load the data for it.

Up until now I have created an API that returns me the data that I need, based on the page number and the number of rows on the page. However, I don't know how to use it with AngularJS.

Can you please help me?

You should try using UI Grid read its documentation. Used for displaying paginated data. Like jQuery data tables. — Coder John
– Coder John, Commented Mar 9, 2016 at 16:03

Gustavo Garcia · Accepted Answer · 2016-03-09 15:59:26Z

1

It looks like a backend problem. If you are using a standard restful backend, use the limit/skip parameters, you can encapsulate into a paginate.

Example:

localhost:1337/dataTable?skip=0&limit=100
localhost:1337/dataTable?skip=100&limit=100
localhost:1337/dataTable?skip=200&limit=100

...

On the frontend use a table object like ng-Table, and use the pages to keep track of the offset, the page number and the total items available.

skip = (pagNum - 1 * pageSize) limit = pageSize

Make your backend return you the page you want plus the available dataNumber so you can build the pages controller.

Documentation for skip/limit on sails

http://sailsjs.org/documentation/reference/waterline-orm/queries/limit

http://sailsjs.org/documentation/reference/waterline-orm/queries/skip

edited Mar 9, 2016 at 15:59

answered Mar 9, 2016 at 15:54

Gustavo Garcia

3,4332 gold badges22 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user3782400 Over a year ago

I still do not understand how to tell angular "use only this data and on click load the other data"

Gustavo Garcia Over a year ago

Check this two links: This guy uses ng-repeat with pagination functions. This guy simulates a backend pagination on the app.js file. Checks that he overloads the get with a .slice function. You need to change it to a $http request with the same approach. Simple example There is this second example (that is much more complex) it uses the ngTableParams with a backend pagination on a java server. Complex example

Dane Macaulay · Accepted Answer · 2016-03-09 15:54:10Z

0

Best approach is to keep track of the limit and offset in your controller. Then when user selects new page (offset) or changes items per page (limit), update the corresponding values and use them to make a new http request.

answered Mar 9, 2016 at 15:54

Dane Macaulay

8148 silver badges11 bronze badges

Comments

Coder John · Accepted Answer · 2016-03-09 16:10:26Z

0

You could call a function on ng-change of a dropdown and that drop down would contain values of page number and number of records to fetch. Or you can provide two text boxes one for page number other for number of records and keep a button and on its ng-click event that will take value of those text boxes and post to your server and bring back data based on new values in text boxes

answered Mar 9, 2016 at 16:10

Coder John

7864 silver badges7 bronze badges

Collectives™ on Stack Overflow

AngularJS dynamic table - RESTfull data

3 Answers 3

...

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

...

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related