You are here

How To Paginate API-based Data Into A Grid Using AngularJS

In situations where a query is likely to return a very long list, paginating the delivery of those results near the source can ease the burden on the systems (eg: the networks) and the user experiences that ultimately must handle them. Therefore, pagination is an important for many projects -- especially ones that involve APIs -- where information retrieval is a part of the workflow

Pagination is an important requirement for many projects involving information retrieval. It can help with filtering and sorting data, but it often gets overlooked. As means to optimizing the flow of large data sets from a source to a destination (eg: from an API to a mobile app), pagination is an effective technique for effectively improving user experience by improving page response time while making the information more usable as it returns data in more manageable quantities.

It is most commonly encountered in search results on websites (think Google results page) where it divides the returned content into discrete and actionable packages, and where a single body of content is paginated into multiple Web pages, there can be both positive and negative SEO consequences. It also has uses in publishing, where printed books and magazines are first represented as digital files in formats like PDF or QXD, sorted into individual pages.

There are also many debates that occur regarding how pagination should be represented on screen, with the general professional consensus for web pages being a horizontal line of links (in numbers), framed by “Previous” and “Next” links, with the current page clearly identified. However, since pagination is often only considered late in the project as a mere design afterthought, many on-screen representations get tucked away in a corner with insufficient controls and clickable areas that are small and close together, making it difficult to quickly navigate to the desired page.

Whether it is front-end or back-end, when you have more data than a user can manage or your grid can fit, pagination is a solution. This tutorial covers reading and paginating data using ng-grid, a popular Grid solution which was built for AngularJS. It begins with building the grid solution that will hook into the RESTful endpoint running locally using NodeJS and ExpressJS. The author assumes knowledge of AngularJS, as well as the basics of Grunt, Bower, Bootstrap and REST, as well as having node, npm, git and bower installations on the development machine.

The tutorial begins with adding ng-grid into an Angular Grunt Seed project using Bower. Step-by-step instructions cover adding JavaScript and CSS files as dependency and assigning a REST endpoint to demonstrate features such as column definitions and cell templates. To finish, the author supplies the completed demo code, as well as promising to return with Part 2, which will cover ng-grid for a real REST API.

Be sure to read the next Application Development article: 6 Categories that Make up the API Economy

Original Article

Part I: ng-grid and a Simple REST API