javascript - Data Not Visible With jqGrid Datatype JSON -


i trying bind json data jqgrid, grid empty. did made mistake code ?

script:

    <table id="grid"></table>     <div id="pager"></div>      <script type="text/javascript">     var data = '{ "employees" : [' +                 '{ "firstname":"john" , "lastname":"doe" },' +                 '{ "firstname":"anna" , "lastname":"smith" },' +                 '{ "firstname":"peter" , "lastname":"jones" } ]}';        $("#grid").jqgrid({         datatype: 'json',         colmodel:[           {name:'firstname', label: 'first name', width: 300},           {name:'lastname', label: 'last name', width: 200}         ],         caption: "reportingemployees",         pager : '#pager',         height: 'auto'       }).navgrid('#pager', {edit:false,add:false,del:false, search: false});     </script> 

you need pass json data in following format , not text, jqgrid function , set datatype local because there no api / url call.

var mydata = [{ "firstname":"john" , "lastname":"doe" },                 { "firstname":"anna" , "lastname":"smith" },                 { "firstname":"peter" , "lastname":"jones" }];        $("#grid").jqgrid({         data: mydata,//pass data here         datatype: 'local',//set datatype local         colmodel:[           {name:'firstname', label: 'first name', width: 300},           {name:'lastname', label: 'last name', width: 200}         ],         caption: "reportingemployees",         pager : '#pager',         height: 'auto'       }).navgrid('#pager', {edit:false,add:false,del:false, search: false}); 

jsfiddle demo

note: - please make sure have included below js files along jquery lib

grid.locale-en.js
jquery.jqgrid.min.js


Comments

Popular posts from this blog

toolbar - How to add link to user registration inside toobar in admin joomla 3 custom component -

linux - disk space limitation when creating war file -

How to provide Authorization & Authentication using Asp.net, C#? -