Your problem is that you have chosen very exotic format of data. The default format representation of the local data is array of objects with named properties. Additional property in the array items are expected id
. You use another format so you have to add localReader parameter which describes the format of data
uses the same grid which you posted. I just added
localReader: {repeatitems: true}
and removed all formatters which code you not posted. The best way to fill the grid is to use data
option with the input data. I added height: "auto"
only for better look of the grid. So you will see
==================
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>http://stackoverflow.com/q/10216897/315935</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/redmond/jquery-ui.css" /> <link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.3.2/css/ui.jqgrid.css" /> <style type="text/css"> html, body { font-size: 75%; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script> <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.3.2/js/i18n/grid.locale-en.js"></script> <script type="text/javascript"> $.jgrid.no_legacy_api = true; $.jgrid.useJSON = true; </script> <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.3.2/js/jquery.jqGrid.src.js"></script> <script type="text/javascript"> //<![CDATA[ /*global $ */ /*jslint browser: true */ $(function () { 'use strict'; var mydata = [ {"id":338591,"cell":[2,"338,591","140","15545536","Lord Patrice02200","","0","Patrice02200",0]}, {"id":339591,"cell":[2.24,"339,591","50","16300072","Lord mercedes9pd7e","","0","mercedes9pd7e",0]}, {"id":341591,"cell":[3.61,"341,591","727714","16330552","Lord Torkan","","0","Rizane",0]}, {"id":341592,"cell":[4.24,"341,592","490","10929616","Lord pulpfiction","","0","pietra",0]} ]; // Creating grid1 $("#grid").jqGrid({ caption: 'Villes', data: mydata, datatype: 'local', colNames: ['Actions', 'Distance', 'Coordonnées', 'Nom', 'Joueur', 'Puissance', 'Alliance', 'Diplomatie', 'Brumes', 'Status'], colModel: [ {name: 'actions', sortable: false, search: false, width: 50}, {name: 'range', index: 'range', width: 60}, {name: 'coords', index: 'gps', sortable: false, search: false, width: 90}, {name: 'city', index: 'city'}, {name: 'player', index: 'player'}, {name: 'might', index: 'might', align: 'right', defval: 0, width: 70}, {name: 'guild', index: 'guild'}, {name: 'diplomacy', index: 'diplomacy', width: 70}, {name: 'mist', index: 'mist', align: 'center', width: 55}, {name: 'user', index: 'user'} ], pager: '#pager-cities', loadui: 'disable', rowNum: 20, rowList: [20, 50, 100], sortname: 'range', sortorder: 'asc', altRows: true, autowidth: true, viewrecords: true, gridview: true, multiselect: true, multiboxonly: true, multikey: 'shiftKey', localReader: {repeatitems: true},//debug!!! height: "auto" }); }); //]]> </script> </head> <body> <table id="grid"><tr><td></td></tr></table> <div id="pager-cities"></div> </body> </html>