Angular JS 1.6 – server side pagination with sorting using Angular UI Bootstrap

August 8, 2018

Angular 1.6 SPA server side pagination of data with sort.

To create a SPA which lists user data with pagination  and sorting we need the following CDN links
– Angular JS 1.6.9 js CDN.
– Angular JS UI bootstrap -Bootstrap components written in pure AngularJS .
– Bootstrap CSS file.

STEP 1 – Create file index.html and add the relevant CDN links using the following codes.

STEP 2 – CREATING ANGULAR MODULE and DEFINE THE APP

create, register and retrieve Angular JS module using the following code.The name of the module is ‘userLog’.

and in the HTML.

STEP 3 – DEFINE THE CONTROLLER

AngularJS applications are controlled by controllers.
The ng-controller directive defines the application controller.The name of the controller here is ‘listController’.In HTML , add the following code

STEP -4 CREATING SERVICES AND INJECTING THEM

In this example we will create two services one for getting the total number of users and other for getting the data each page.The name of the first service is ‘count’ and name of the second service is ‘getloglist’

Services in both cases send HTTP requests to the APIs.For this we inject $http service.The $http service get takes a single argument which is a configuration object that is used to generate an HTTP request and returns a promise.

For our service which gets the list of users,we send limit and offset to the server.The limit and offset is for achieving pagination.For convenience,the request is commented in the above code and replaced  with normal request.You should replace the request url with corresponding  API  end point which should accepts limit and offset parameters.

 

The service for getting the total number of pages should be called initially

 

 

Now to inject the service in to our controller,do the following

STEP -4 CREATING PAGINATION LINKS AND CONFIGURING PAGINATION

For creating configuration  variables

currentPage – First page

entryLimit – Number of results per page

noOfPages- Number of pages before next and previous

Inside the html , write the following code to create the pagination widget using Angular bootstrap UI

Loading the first page initially,we do the following

Now for Listing the data we use angular ng-repeat directive

 

For loading pages on click add the following code  to the pagination block

 

Add code to call the service to get data on click on pagination links

STEP -5 CREATING SORT

As we are looping over object OrderBy wont probably work.So we have to add a filter.We can create  a filter using the following code

Creating the filter,

This filter will search for attribute in the object and sort.

To use the filter,use the following code

 

The above code will set the order attribute as as ‘id’

To add the filter attribute to the listing,

Inside the controller set default sort order and attribute using the following code.

 

See the full code below

 

 

 

 

 

 

 

 

 

This is just an example  , the code should be structured in a better way .The API urls should be modified to support server side pagination.The sorting here is client sidesorting.You can change it to server side sorting by modifying the api end points to accept sorting parameters.

To learn more about Angular JS ,see the following links

https://docs.angularjs.org/guide

 

 

 

No Comments

Leave a Reply

Your email address will not be published. Required fields are marked *