jQuery Grid Plugin - jqGridForum

Topic RSS

problem with columns sorting and paging

22/01/2009
02:40

Zoze

New Member

Members

Forum Posts: 2

Member Since:
21/01/2009

Offline

Hi guys,

I am new at jqgrid and jquery in general. I am following the demo examples and trying to display json data in a grid. I have managed to do that, but I face two major problems.

(1)
The columns sorting doesn't seem to work. As far as I have understood reading the documentation, sortable:true is the default param, so I suppose I must not add something else to achieve sorting. The same problem appears even if I use xml datatype, but everything is ok if I use local datatype (and fill grid with static values)

(2)
The pager doesn't operate appropriately. Althought I set rowNum to 10, if the returned results are, let's say 24 (I am using a REST web service to get the json file), all the 24 rows will be displayed in one page, instead of three.

My json file has the following format:

{
"total": 3,
"page": "1",
"records": "24",
"rows": [
{"id": 1,"cell": ["col1", "col2", "col3", "col4", "col5" ]}
}

and my html (taken from demos page):

<html>
<head>
<title>XML Mapping</title>
<link type="text/css" rel="stylesheet" href="themes/basic/grid.css"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.jqGrid.js"></script>

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#jsonmap").jqGrid({
url: "/my-appl/getJsonData",
datatype: "json",
colNames: ["ASIN", "Author", "Title", "Price", "Published Date"],
colModel: [
{name: "ASIN", index: "ASIN", width: 100},
{name: "Author", index: "Author", width:120},
{name: "Title", index: "Title", width: 180},
{name: "Price", index: "Manufacturer", width: 100, sorttype: "float"},
{name: "DatePub", index: "ProductGroup", width: 130, sorttype: "date"}
],
sortname: 'Price',
sortorder: "desc",
height: 250,
rowNum: 10,
rowList: [10,20,30],
imgpath: "themes/basic/images",
viewrecords: true,
pager: jQuery("#pjmap"),
jsonReader: {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: true,
cell: "cell",
id: "id"
},
caption: "JSON Mapping Example"
});
});
</script>
</head>
<body>
<table id="jsonmap" class="scroll" cellpadding="0" cellspacing="0"></table>
<div id="pjmap" class="scroll" style="text-align:center;"></div>
</body>
</html>

Any help is more than welcome! Thank you for your time

Regards,

Zoze

22/01/2009
10:05

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

Hello,

It is a good idea to check you server side code when you try to sort and navigate between pages. The grid accept the data what is returned from the server. If you do not return the right values when you sort then you can not expect good behavior. And this is not from jqGrid.
If you set rowNum to 10 then your server should return 10 rows (or less and not greater) and nothing more. If you set rownum 10 and you return 24 that is the problem of the server side code.

Regards

Tony

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

22/01/2009
10:54

Zoze

New Member

Members

Forum Posts: 2

Member Since:
21/01/2009

Offline

Thanks Tony for your helpful comment !

I'll check again my server side code and try to solve this !

Regards,

Zoze

All RSS

Forum Timezone: Europe/Sofia

Most Users Ever Online: 715

Currently Online:
22 Guest(s)