Spring MVC Server Side Pagination ng-grid AngularJS

Spring MVC Server Side Pagination ng-grid AngularJS

There are many third party component available to achieve server side pagination for Spring MVC application. Before I had written two tutorial to do pagination on Spring MVC application links are below:

Today we will see how to create pagination on Spring MVC application using ng-grid AngularJS. As per my experience this is best of all other pagination which you had seen before. Please see details steps below:

After all set up and configuration you will see below pagination screen:

Spring MVC Server Side Pagination ng-grid AngularJS

  • Create maven project name: SpringMVCAngularJSService
  • Final project structure:

Spring MVC Server Side Pagination ng-grid AngularJS

  • pom.xml:

  •  web.xml

  • dispatcher-servlet.xml:

  • angularJSngGridPagination.jsp:

  • SpringMVCController.java:

Note: On each page user clicks call comes to the server and we are passing two variable “@PathVariable String pageSize, @PathVariable String page” on method getPaginationData to find what is the page size and page number so that we can control data manipulation on the server side and only load current page data on the page. 

  • Lets run this application now (We are using tomcat server with eclipse to run this if you are not sure how to configure and run tomcat with eclipse please follow this tutorial). To run: Right click project –> Run As –> Run on Server where you will see below page:

Spring MVC Server Side Pagination ng-grid AngularJS

That’s it. There are many option are available on ng-grid to show filter option, search option etc… for more information please visit ng-grid tutorial here

download Download Project: SpringMVCPaginationNGGrid

10 thoughts on “Spring MVC Server Side Pagination ng-grid AngularJS

  1. Hi

    I tried this example in my local system but getting some error can you email me “Spring MVC Server Side Pagination ng-grid AngularJS” example in .zip format so that i could better understand.

    I also tried to download this example but problem is that unable to unzip .7z file.

    Thanks in advance.

  2. Hi am able to see the results in the attached example. But after adding couple of changes in the JSP. I have updated the ng-grid css and js URLS with :

    Am seeing the data only when am using the following URL :

    http://localhost:8080/SpringMVCAngularJSService/getPaginationDataPage

    am seeing only the blank page with title when using the following URL:

    http://localhost:8080/SpringMVCAngularJSService

    Kindly clarify me whether its expected or not?

    Thanks,
    Soundararajan

  3. Hi am able to see the results in the attached example. But after adding couple of changes in the JSP. I have updated the ng-grid css and js URLS with :

    https://cdnjs.cloudflare.com/ajax/libs/ng-grid/2.0.11/ng-grid.css

    https://cdnjs.cloudflare.com/ajax/libs/ng-grid/2.0.11/ng-grid.debug.js

    Am seeing the data, when am using the following URL :

    http://localhost:8080/SpringMVCAngularJSService/getPaginationDataPage

    am seeing only the blank page with title when using the following URL:

    http://localhost:8080/SpringMVCAngularJSService

    Kindly clarify me whether its expected or not?

    Thanks,
    Soundararajan

Leave a Reply

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