Pages Navigation Menu

Coding is much easier than you think

Setup and Load Data in jQGrid using Servlets and JSP

JqGrid is an Ajax-enabled JavaScript control that provides solutions for representing and manipulating grid data on the web. Since the grid loads data at client side via Ajax call-backs, so it can be integrated with any server-side technology, including PHP, ASP and Java. JqGrid uses a jQuery Java Script Library and is written as plugin for that package.

Library required

JqGrid library
Jquery UI theme
Now to start with demonstration of above topic, let us Create a Dynamic Web Project in Eclipse, with following project structure.
JqGrid structure
As show in the image download the required library mentioned and place it in jQGrid and gridJs folder of eclipse work-space, and refer these files in the head section in the jsp as shown below.
Setup done from the browser perspective: JqGrid
jQGrid plugin allows you to issue an ajax request via jQuery plugin and expects a JSON object as a response, hence the following configuration needs to be made in Jsp file

JSP page


jqGird in Servlet


As you can see, jQGrid just needs a div and table element as HTML tags.
You might be interested to read:


JS File

File : getJqGridData.js

jQuery(document).ready(function() {
		url : "GridServlet",
		datatype : "json",
		mtype : 'POST',
		colNames : [ 'Id', 'FirstName', 'LastName', 'City', 'State' ],
		colModel : [ {
			name : 'id',
			index : 'id',
			width : 100
		}, {
			name : 'firstName',
			index : 'firstName',
			width : 150,
			editable : true
		}, {
			name : 'lastName',
			index : 'lastName',
			width : 150,
			editable : true
		}, {
			name : 'city',
			index : 'city',
			width : 100,
			editable : true
		}, {
			name : 'state',
			index : 'state',
			width : 100,
			editable : true
		} ],
		pager : '#pager',
		rowNum : 10,
		rowList : [ 10, 20, 30 ],
		sortname : 'invid',
		sortorder : 'desc',
		viewrecords : true,
		gridview : true,
		caption : 'Data Report',
		jsonReader : {
			repeatitems : false,
		editurl : "GridServlet"
	jQuery("#list").jqGrid('navGrid', '#pager', {
		edit : true,
		add : true,
		del : true,
		search : true

Setup done from the server’s perspective: Servlet
In Servlet, we are going to use a JSON library to convert Java objects(jqGridModels) to JSON strings that will be parsed by jQGrid plugin in the JSP page and will be displayed on the web page.This conversion of Java Object to Json format is done using Google gson jar.



package servlet;

import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import model.JqGridModel;


public class JqGridServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doPost(HttpServletRequest request,
		    HttpServletResponse response) throws ServletException, IOException {

		JqGridModel gridModel1 = new JqGridModel();

		JqGridModel gridModel2 = new JqGridModel();

		List jqGridModels = new ArrayList<>();

		Gson gson = new GsonBuilder().setPrettyPrinting().create();
		String jsonArray = gson.toJson(jqGridModels);
		jsonArray = "{\"page\":1,\"total\":\"2\",\"records\":"
			+ jqGridModels.size() + ",\"rows\":" + jsonArray + "}";



For jQGrid, page property represents current page number, and total represent total no pages, records represents Total number of records and rows represent the actual data. A sample return value from the above servlet is shown below
“id”: 1,
“firstName”: “Mohaideen”,
“lastName”: “Jamil”,
“city”: “Coimbatore”,
“state”: “TamilNadu”
“id”: 2,
“firstName”: “Ameerkhan”,
“lastName”: “Saffar”,
“city”: “Thirunelveli”,
“state”: “Tamilnadu”

Model class

Create the Model class , which will have getters and setters for fields used in js file

package model;

public class JqGridModel {

	private int id;
	private String firstName;
	private String lastName;
	private String city;
	private String state;

	public int getId() {
		return id;

	public String getFirstName() {
		return firstName;

	public String getLastName() {
		return lastName;

	public String getCity() {
		return city;

	public String getState() {
		return state;

	public void setId(int id) { = id;

	public void setFirstName(String firstName) {
		this.firstName = firstName;

	public void setLastName(String lastName) {
		this.lastName = lastName;

	public void setCity(String city) { = city;

	public void setState(String state) {
		this.state = state;



Make sure that the web.xml has the following mapping.






On running the application
Demo JqGrid
On clicking add icon
jQGrid add
On clicking edit icon
eDit JqGrid
** Update — The below screenshot is the demo of pagination in java web application via ajax using using jQuery jTable plugin, this plugin has several inbuilt theme and lot may cool features like crud implementation via ajax, internalization etc, to know more about this plugin, please refer the article here.


  1. will this stuff works in netbeans

    it shows it doesnt exist how to rectify it even after including mentioned jar files

  3. i developed the jqgrid working fine with data base data.but if i use this jqgrid in another page it is not showing the grid….can anyone answer to my problem…..

  4. Hi Jamil,
    I have some queries:-
    1.) if I put a simple code to alert some text in the “getJqGridData.js” file it won’t work
    (inspite of giving the jQuery CDN path) . Why??
    2.)if I want a functionality , to have the table displayed only on the click of a button ,what should be done.


  5. thanks for sharing.. nice tutorial

  6. are you sure about showing total as 2, where total is number of pages here it is shown as 2 for just 2 records…is this correct ?

    • Hi thanks for pointing it out. Here the attribute “total” holds number of page values.

      It should be determined at the server side by dividing “Total no of Records”/”No of records per page”. Hope you got cleared.

      • yup..thanks :)

      • [code] $(“#sendAll1”).click(function(){
        //var localGridData = $(“#list”).jqGrid(‘getGridParam’,’data’);
        // alert(“”+localGridData);
        var data = $(“#list”).jqGrid(“getRowData”);
        var dataToSend = JSON.stringify(data);
        alert(“The following data are sending to the server:\n” + dataToSend);
        type: “POST”,
        url: “savedoctor1″,
        data: dataToSend,
        contentType: “application/json; charset=utf-8”,
        success: function(response, textStatus, jqXHR ,data) {
        // display an success message if needed
        error: function(jqXHR, textStatus, errorThrown) {
        // display an error message in any way

        i want able how to receive at servlet

  7. you site is really helpful plz upload the above code thanks in advance.

  8. Hi Jameel,

    The import for :


    is showing cannot be resolved. All Jars included already as suggested.

  9. Hola una consulta, en “url:” que pones exactamente? he visto que algunos ponen algo asi: unapagina.jsp y otros ponen algo asi: “LoadJsonDataServlet?type=BS21 7RH”… me podrias explicar esto porfa.


    • Hola ,

      Me olvidé de incluir archivos web.xml configurtion en el puesto. Ahora he puesto al día . La configuración para GridServlet se puede encontrar en el mismo.

  10. Insert title here


    alert(“bnx bhyy”);
    var data = [[48803, “DSK1”, “”, “02200220”, “OPEN”], [48769, “APPR”, “”, “77733337”, “ENTERED”]];

    datatype: “local”,
    height: 250,
    colNames: [‘Inv No’, ‘Thingy’, ‘Blank’, ‘Number’, ‘Status’],
    colModel: [{
    name: ‘id’,
    index: ‘id’,
    width: 60,
    sorttype: “int”},
    name: ‘thingy’,
    index: ‘thingy’,
    width: 90,
    sorttype: “date”},
    name: ‘blank’,
    index: ‘blank’,
    width: 30},
    name: ‘number’,
    index: ‘number’,
    width: 80,
    sorttype: “float”},
    name: ‘status’,
    index: ‘status’,
    width: 80,
    sorttype: “float”}
    caption: “Stack Overflow Example”
    // ondblClickRow: function(rowid,iRow,iCol,e){alert(‘double clicked’);}
    var names = [“id”, “thingy”, “blank”, “number”, “status”];
    var mydata = [];

    for (var i = 0; i < data.length; i++) {
    mydata[i] = {};
    for (var j = 0; j < data[i].length; j++) {
    mydata[i][names[j]] = data[i][j];

    for (var i = 0; i <= mydata.length; i++) {
    $("#grid").jqGrid('addRowData', i + 1, mydata[i]);


    $("#grid").jqGrid('setGridParam', {onSelectRow: function(rowid,iRow,iCol,e){alert('row clicked');}});
    $("#grid").jqGrid('setGridParam', {ondblClickRow: function(rowid,iRow,iCol,e){alert('double clicked');}});

    kam cho?

    what is problem in this code?

    • hi,
      insertion of data is not happenign please help me out

      • Hi,
        This is just a sample application to setup jQgrid. I have not written any logic for CRUD operations

Leave a Comment

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