Need full example for jqgrid with struts2

I am using jqgrid plugin in struts2.I am able to see JSON data in browser but not sure how to show that data in grid (using grid.jsp).

Below are the files I am using:

struts.xml

<?xml version="1.0" encoding="UTF-8" ?>

<constant name="struts.devMode" value="true" />

<package name="default" namespace="/" extends="json-default">

    <result-types>
        <result-type name="json" class="com.googlecode.jsonplugin.JSONResult" />
    </result-types>

    <action name="getJSONResult" class="com.developer.am.action.JSONDataAction">
        <result type="json" />
    </action>

    <action name="ListUsers" class="com.developer.am.action.ListUsersAction">
        <result name="SUCCESS">grid.jsp</result>
    </action>

</package>

web.xml

<?xml version="1.0" encoding="UTF-8"?>

http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0"> Struts2_Json index.jsp

<filter>
    <filter-name>struts2</filter-name>
    <filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class>

</filter>

<filter-mapping>
    <filter-name>struts2</filter-name>
    <url-patte>/*</url-patte>
</filter-mapping>

JSONDataAction.java

package com.developer.am.action; 
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import com.opensymphony.xwork2.Action;

public class JSONDataAction{


int id = 1;
String firstName = "ASHOK";
String lastName = "BHOR";
String useame = "ab";
String email="ab@.com";

        /*setter getter methos */

        }

ListUsersAction.java

package com.developer.am.action;

public class ListUsersAction {
     public String execute() {
            retu "SUCCESS";
        }
}

index.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
    <%@taglib prefix="st" uri="/struts-tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<st:form action="getJSONResult">

<h1>Hello</h1>
<st:submit value="ok"></st:submit>
</st:form>

</body>
</html>

grid.jsp

 <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" media="screen" href="../css/jquery-ui-1.10.2.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="../css/ui.jqgrid.css" />
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.10.2.custom.min.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<title>List Users</title>
<script type="text/javascript"> 
jQuery().ready(function (){
    alert('Hi');
    jQuery("#list1").jqGrid({
           url:'Struts2_Json/getJSONResult.action',
        datatype: "json",
           colNames:['User Id','First Name', 'Last Name', 'Useame','Email'],
           colModel:[
               {name:'id',index:'id', width:75},
               {name:'firstName',index:'firstName', width:90},
               {name:'lastName',index:'lastName', width:100},
               {name:'useame',index:'useame', width:80},
               {name:'email',index:'useame', width:80}                   
           ],
           rowNum:10,
           autowidth: true,
           rowList:[10,20,30],
           pager: jQuery('#pager1'),
           sortname: 'id',
        viewrecords: true,
        sortorder: "desc",
        caption:"Users"
    }).navGrid('#pager1',{edit:false,add:false,del:false});    
});                
</script>
</head>
<body>
    <table id="list1"></table>
    hi
    <div id="pager1"></div>
</body>
</html>