how to create Jqgrid using jsp

I am very new in jquery and json.i know jsp and java in my project job i have to implement a data grid same like shows in http://www.trirand.com/blog/jqgrid/jqgrid.html# i this example site i need a datagrid u开发者_JAVA技巧sing Json object. i explore all in internet but i cant find any help of that.

please provide me an example with uses jqgrid json using jsp -servlet

I finally converted the PHP code to jsp code of jqgrid:

jQuery(document).ready(function()
    {

    jQuery("#list10").jqGrid({

        url:'griddata.jsp',
    colNames:['Inv No','Date', 'Client'],
        colModel:[{name:'id',index:'id', width:55},{name:'invdate',index:'invdate', width:90},{name:'name',index:'name', width:100}],
    rowNum:10,
    rowList:[5,7,10],
    pager: '#pager10',
    sortname: 'id',
        datatype: 'json',
        viewrecords: true,
        sortorder: "desc",
    multiselect: false,
    imgpath: "themes/basic/images",
    caption: "Invoice Header",
    onSelectRow: function(ids) {

                        jQuery("#list10_d").jqGrid().setGridParam({url : 'getsubdata.jsp?id='+ids}).trigger("reloadGrid")
                        jQuery("#list10_d").jqGrid('setCaption',"Invoice Detail: "+ids)

                        }

        });

    jQuery("#list10").jqGrid('navGrid','#pager10',{add:false,edit:false,del:false});


<!-- subgrid start-->

    jQuery("#list10_d").jqGrid({
                                url:'getsubdata.jsp?id=0',
                                datatype: 'json',
                                colNames:['No','Item', 'Qty', 'Unit','Line Total'],
                                colModel:[
                                        {name:'num',index:'num' },
                                        {name:'item',index:'item'},
                                        {name:'qty',index:'qty',align:"center"},
                                        {name:'unit',index:'unit', align:"center"},     
                                        {name:'linetotal',index:'linetotal',align:"center", sortable:false, search:false}
                                ],
                                rowNum:5,
                                rowList:[5,10,20],
                                pager: '#pager10_d',
                                sortname: 'item',
                                viewrecords: true,
                                sortorder: "asc",
                                multiselect: true,
                                imgpath: "themes/basic/images",
                                caption:"Invoice Detail"
                        }).navGrid('#pager10_d',{add:false,edit:false,del:false});


     }//function
    );//ready

In this code i have created two jsp file .

First one code is below

<%@ page import="java.sql.*,java.util.ArrayList,net.sf.json.*" %>
<%
        String rows=request.getParameter("rows");

        String pageno=request.getParameter("page");
        String cpage=pageno;

        Connection connect = null;
        Statement statement = null;
        PreparedStatement preparedStatement = null;
        ResultSet rs= null;
        Class.forName("com.mysql.jdbc.Driver").newInstance();
        connect = DriverManager.getConnection("jdbc:mysql://localhost/test?user=root&password=root");
        statement = connect.createStatement();
        rs = statement.executeQuery("SELECT * FROM grid ");

        int count=0;
        rs.last();
        count=rs.getRow(); 

        int  pageval=0;
        pageval=(count/Integer.parseInt(rows));

        int limitstart=0;

        limitstart=(Integer.parseInt(rows)*Integer.parseInt(pageno))-Integer.parseInt(rows);
        int total=count/Integer.parseInt(rows);
        String totalrow=String.valueOf(total+1);

        rs = statement.executeQuery("SELECT * FROM grid limit "+limitstart+","+rows);  


        JSONObject responcedata=new JSONObject();
        net.sf.json.JSONArray cellarray=new net.sf.json.JSONArray();

         responcedata.put("total",totalrow);
        responcedata.put("page",cpage);
        responcedata.put("records",count);

        net.sf.json.JSONArray cell=new net.sf.json.JSONArray();
        net.sf.json.JSONObject cellobj=new net.sf.json.JSONObject();

        int i=1;
       while(rs.next())
           {
                cellobj.put("id",rs.getString(1));
                cell.add(rs.getString(1));
                cell.add(rs.getString(2));
                cell.add(rs.getString(3));

        cellobj.put("cell",cell);
        cell.clear();
        cellarray.add(cellobj);
        i++;
       }
        responcedata.put("rows",cellarray);
        out.println(responcedata);

%>

And the secound JSP meams getsubdata.jsp file is below:

<%@ page import="java.sql.*,java.util.ArrayList,net.sf.json.*" %>
<%
        String id=request.getParameter("id");
        String rows=request.getParameter("rows");
        String pageno=request.getParameter("page");
        String cpage=pageno;


        JSONObject mysubdata=new JSONObject();
        JSONArray subarray = new JSONArray();
        Connection connect = null;
   Statement statement = null;

 ResultSet rs= null;
        Class.forName("com.mysql.jdbc.Driver").newInstance();
        connect = DriverManager.getConnection("jdbc:mysql://localhost/test?user=root&password=root");
        statement = connect.createStatement();

        rs = statement.executeQuery("SELECT * FROM subgrid where gridid='"+id+"'");  

        int count=0;
        rs.last();
        count=rs.getRow(); 

        int  pageval=0;
        pageval=(count/Integer.parseInt(rows));

        int limitstart=0;

        limitstart=(Integer.parseInt(rows)*Integer.parseInt(pageno))-Integer.parseInt(rows);
        int total=count/Integer.parseInt(rows);
        String totalrow=String.valueOf(total+1);

        rs = statement.executeQuery("SELECT * FROM subgrid where gridid='"+id+"' limit "+limitstart+","+rows);  

        JSONObject responcedata=new JSONObject();
        net.sf.json.JSONArray cellarray=new net.sf.json.JSONArray();

        responcedata.put("total",totalrow);
        responcedata.put("page",cpage);
        responcedata.put("records",count);

        net.sf.json.JSONArray cell=new net.sf.json.JSONArray();
        net.sf.json.JSONObject cellobj=new net.sf.json.JSONObject();

        int ii=1;
       while(rs.next()) 

       {
                cellobj.put("id",""+ii);

                //cell.add(rs.getString(1));
                cell.add(rs.getString(1));
                cell.add(rs.getString(2));
                cell.add(rs.getString(3));
                cell.add(rs.getString(4));
                cell.add(rs.getString(4));

        cellobj.put("cell",cell);
        cell.clear();
        cellarray.add(cellobj);
        ii++;
       }
        responcedata.put("rows",cellarray);
        out.println(responcedata);

And the secound JSP meams getsubdata.jsp file is below

<%@ page import="java.sql.*,java.util.ArrayList,net.sf.json.*" %>
<%
        String id=request.getParameter("id");
        String rows=request.getParameter("rows");
        String pageno=request.getParameter("page");
        String cpage=pageno;


        JSONObject mysubdata=new JSONObject();
        JSONArray subarray = new JSONArray();
        Connection connect = null;
   Statement statement = null;

 ResultSet rs= null;
        Class.forName("com.mysql.jdbc.Driver").newInstance();
        connect = DriverManager.getConnection("jdbc:mysql://localhost/test?user=root&password=root");
        statement = connect.createStatement();

        rs = statement.executeQuery("SELECT * FROM subgrid where gridid='"+id+"'");  

        int count=0;
        rs.last();
        count=rs.getRow(); 

        int  pageval=0;
        pageval=(count/Integer.parseInt(rows));

        int limitstart=0;

        limitstart=(Integer.parseInt(rows)*Integer.parseInt(pageno))-Integer.parseInt(rows);
        int total=count/Integer.parseInt(rows);
        String totalrow=String.valueOf(total+1);

        rs = statement.executeQuery("SELECT * FROM subgrid where gridid='"+id+"' limit "+limitstart+","+rows);  

        JSONObject responcedata=new JSONObject();
        net.sf.json.JSONArray cellarray=new net.sf.json.JSONArray();

        responcedata.put("total",totalrow);
        responcedata.put("page",cpage);
        responcedata.put("records",count);

        net.sf.json.JSONArray cell=new net.sf.json.JSONArray();
        net.sf.json.JSONObject cellobj=new net.sf.json.JSONObject();

        int ii=1;
       while(rs.next()) 

       {
                cellobj.put("id",""+ii);

                //cell.add(rs.getString(1));
                cell.add(rs.getString(1));
                cell.add(rs.getString(2));
                cell.add(rs.getString(3));
                cell.add(rs.getString(4));
                cell.add(rs.getString(4));

        cellobj.put("cell",cell);
        cell.clear();
        cellarray.add(cellobj);
        ii++;
       }
        responcedata.put("rows",cellarray);
        out.println(responcedata);

You've really explored the entire internet? Impressive. All the demo's on the jqGrid demo page show the code necessary, even the server side code. You'll simply need to convert their PHP into JSP/Servlet code.