title: I want to display Json data in jqGrid table
body: <p>i am using JAX-RS with JQGrid. Now i am getting the Json data from server but i want to display it in the JQGrid table format. i have applied JQGrid table but content from the server is not displaying in the table.</p>
  
  <p>This is my Json data from the server</p>
  
  <pre><code>[{"country":"US","id":61,"name":"mahabali"},{"country":"america","id":63,"name":"swamy"},{"country":"hjj","id":64,"name":"fg"},{"country":"hjj","id":65,"name":"fg"},{"country":"hjj","id":66,"name":"fg"}]
  </code></pre>
  
  <p>This is my HTML page</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;meta http-equiv="X-UA-Compatible" content="IE=edge" /&gt;
  &lt;title&gt;&lt;center&gt;My First Grid&lt;/center&gt;&lt;/title&gt;
  
  &lt;link rel="stylesheet" type="text/css" media="screen" href="../css/jquery-ui-1.8.2.custom.css" /&gt;
  &lt;link rel="stylesheet" type="text/css" media="screen" href="../css/ui.jqgrid.css" /&gt;
  
  &lt;style type="text/css"&gt;
  html, body {
      margin: 0;
      padding: 0;
      font-size: 75%;
  }
  &lt;/style&gt;
  
  &lt;script src="../js/jquery-1.7.2.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="../js/grid.locale-en.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="../js/jquery.jqGrid.min.js" type="text/javascript"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  $(function () {
      $("#list").jqGrid({
          url: "http://localhost:8080/jsf_jaxrs/webapi/persons/add",
          datatype: "local",
          mtype: "GET",
          colNames: ["Country", "Id", "Name"],
          colModel: [
              { name: "country", width: 300, align: "right"},
              { name: "id", width: 300, align: "right"},
              { name: "name",  width: 300, align: "right"}
          ],
          pager: '#pager',
          rowNum:10,
          rowList:[10,20,30],
          sortname: 'id',
          sortorder: 'desc',
          height: '300',
          loadonce: true,
          caption: 'My first grid',
          sortable: true
      }); 
  }); 
  &lt;/script&gt; 
  &lt;/head&gt;
  &lt;body&gt;
      &lt;table id="list"&gt;&lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt; 
      &lt;div id="pager"&gt;&lt;/div&gt; 
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>