Question

I an new to jqgrid with json. I have reviewed the various questions and answers; however, I am still not able to get the data to display in the grid. Below are my results from the PERL script, the HTML page, and a screen shot of the results. Any help will be very much appreciated.

PERL Results {"addressInfo": { "page": "1", "total": "5","records": "61","rows:"[ { "Id": 1, "lname": "Adams", "fname": "Mr and Mrs David ", "address": "3800 Maplewood Dr", "address2": "", "city": "Lafayette","state": "IN", "zip": "47905", "got-card": "2015", "status": "Active"}, { "Id": 2, "lname": "Baker", "fname": "Mrs Ellen ", "address": "1857 North Colebrook Rd", "address2": "", "city": "MANHIEM","state": "PA ", "zip": "17545", "got-card": "2015", "status": "Active"}, { "Id": 3, "lname": "Banzhof", "fname": "Mr and Mrs Don ", "address": "107 Wellington Rd", "address2": "", "city": "Lancaster","state": "PA ", "zip": "17603", "got-card": "2015", "status": "Active"}] }}

HTML code

<link rel="stylesheet" type="text/css" media="screen" href="jqgrid/css/ui-lightness/jquery-ui.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="jqgrid/css/ui.jqgrid.css" />
 
<script src="jqgrid/js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="jqgrid/js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="jqgrid/js/jquery.jqGrid.min.js" type="text/javascript"></script>
 

<script>

//<![CDATA[
   jQuery(document).ready(function () {

  jQuery("#list2").jqGrid({
   	url:'/perl/addrlist2x.pl',
	datatype: "json",
	mtype: 'GET',
    colNames:['Id','Last Name', 'Name','Address','Address 2','City','State','Zip','Got-Card','Status'], //define column names
    colModel:[
      {name:'id', index:'id', width:25},
      {name:'lname', index:'lname', width:100, formatter:'showlink', formatoptions:{baseLinkUrl:'http://localhost/html/addr-update2.html', idName:'Id'}}, 
      {name:'fname', index:'lname', width:200},
      {name:'address', index:'lname', width:250},
      {name:'address2', index:'lname', width:250},
      {name:'city', index:'lname', width:100},
      {name:'state', index:'lname', width:45},
      {name:'zip', index:'lname', width:40},
      {name:'got-card', index:'lname', width:40},
      {name:'status', index:'lname', width:50}
      ],      //define column models
	jsonReader: {
       repeatitems: false,
       id: "Id",
       root: 'addressInfo.rows',
       page: function (obj) { return 1; },
       total: function (obj) { return 1; },
       rows: function (obj) { return obj.addressInfo.rows.length; }  
    },

    width: 900,              //specify width; optional
    rowNum:10,
	loadonce: true,
   	rowList:[15,30,45, 60],
   	pager: '#pager2',
   	sortname: 'lname',
    viewrecords: true,
    sortorder: "asc",
    caption:"Christmas Address List"
  });
});
//]]>
</script>

</head>
<body>
<table id="list2"></table>
<div id="pager2"></div>

</body>
</html>

Screen Shot of Resultsenter image description here

Answer 1

The JSON data is wrong. You should fix "rows:" [{ to "rows": [{. I'd recommend you to validate JSON data in http://jsonlint.com/.

JSON data not showing in JQGrid

1 个答案: