CODEWITHSUNDEEP
jqueryjquery-ui
Almira Bojani
Almira Bojani

Reputation: 579

JQuery grid doesn't show data - show empty grid

Can anybody help me with the jQuery plugin jqGrid? I downloaded jqGrid 4.4.5 and I put in code 

 <script>
        $(document).ready(function() {
             jQuery("#list2").jqGrid({ url:'test.json', datatype: "json", colNames:['Inv No','Date'], colModel:[ {name:'id',index:'id', width:55}, {name:'date',index:'date', width:90}], rowNum:10, rowList:[10,20,30], pager: '#pager2', sortname: 'id', viewrecords: true, sortorder: "desc", caption:"USERS" }); jQuery("#list2").jqGrid('navGrid','#pager2',{edit:true,add:true,del:true});

        });
    </script>

I have in my html table 

  <table id="list2"></table>
  <div id="pager2"></div>

and I have test.json like 

[
    {
        "id": 3,
        "date": ""
    },
    {
        "id": 2,
        "date": "1"
    },
    {
        "id": 3,
        "date": ""
    }
]

but when I load page I don't get any data in grid just like on picture enter image description here.

Can anybody point out what I'm doing wrong ?

Upvotes: 1

Views: 585

Answers (1)

2GDev
2GDev

Reputation: 2466

JQgrid is awesome! But the documentation is not very well...

In your case the problem is the Json data... If you look here in the JSON DATA part then you realize that the Json you're trying to use in not valid for JQGrid...

Must respect this format : 

{ 
  "total": "xxx", 
  "page": "yyy", 
  "records": "zzz",
  "rows" : [
    {"id" :"1", "cell" :["cell11", "cell12", "cell13"]},
    {"id" :"2", "cell":["cell21", "cell22", "cell23"]},
      ...
  ]
}

Check the link and read beacause is not too simply...

Upvotes: 1

Related Questions