Forum
Log In
Home
Topic RSS
16:38
31/03/2012
Offline
Hi,
I'm trying to read a JSON file to populate a jqGrid through jQuery. Grid loads fine. But, I couldn't able to acheive pagination and sorting.
Can someone help?. Here is my code.
==========================================================================
Grid.html
==========================================================================
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<link rel="stylesheet" type="text/css" media="screen" href="css/jquery-ui-1.8.18.custom/css/jquery-ui-1.8.17.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="plugins/jquery.jqGrid-4.3.1/css/ui.jqgrid.css" />
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script src="plugins/jquery.jqGrid-4.3.1/js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="plugins/jquery.jqGrid-4.3.1/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="js/callWebService.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
jQuery("#list1").jqGrid({
datatype:function(jsonData){
getEmployees();
},
height:400,
width:1850,
colNames:['Employee Name','Age', 'Department', 'Salary','Description'],
colModel :[
{name:'employeeName', index:'employeeName', width:120, align:'left', sortable:false},
{name:'age', index:'age', width:170, align:'left', sortable:false},
{name:'department', index:'department', width:90, sortable:true, align:'left'},
{name:'salary', index:'salary', width:140, align:'left', sortable:false},
{name:'description', index:'description', width:85, align:'left'}],
pager: jQuery('#pager2'),
rowNum:10,
rowList:[10,20,30],
loadonce:true,
viewrecords: true,
scroll:false
})
function getEmployees()
{
var fetchOrderDetailsFrom = 'data.json';
var ordersData= callWebService('GET', fetchOrderDetailsFrom);
var parsedOrderData = eval(" (" + ordersData + ") ");
for (var i=0;i<parsedOrderData.rows.length;i++)
{
$('#list1').jqGrid("addRowData",i,parsedOrderData.rows[i]);
}
});
});
</script>
<table id="list1"></table>
<div id="pager2"></div>
<br />
</html>
=========================================================================
data.json
=========================================================================
{
"total": "1",
"page": "2",
"records": "10",
"rows": [
{
"employeeName": "Mike",
"age": "25",
"department": "Sales",
"salary": "12000",
"description": "Belongs to Sales Dept"
},
{
"employeeName": "Veron",
"age": "21",
"department": "Corporate",
"salary": "23000",
"description": "Belongs to Corporate"
},
{
"employeeName": "Vettal",
"age": "29",
"department": "Logistics",
"salary": "21000",
"description": "Belongs to Logistics dept."
},
{
"employeeName": "Ronaldo",
"age": "32",
"department": "Aviation",
"salary": "15000",
"description": "Belongs to Aviation dept."
},
{
"employeeName": "Miller",
"age": "35",
"department": "Transportation",
"salary": "17000",
"description": "Belongs to Transportation dept."
},
{
"employeeName": "George",
"age": "28",
"department": "Inventory",
"salary": "15000",
"description": "Belongs to Inventory Dept"
},
{
"employeeName": "Mason",
"age": "62",
"department": "Accounts",
"salary": "23000",
"description": "Belongs to Accounts"
},
{
"employeeName": "Ryan",
"age": "45",
"department": "Logistics",
"salary": "32000",
"description": "Belongs to Logistics dept."
},
{
"employeeName": "Steve",
"age": "36",
"department": "Inventory",
"salary": "26000",
"description": "Belongs to Inventory dept."
},
{
"employeeName": "Peter",
"age": "37",
"department": "Aviation",
"salary": "13500",
"description": "Belongs to Aviation dept."
},
{
"employeeName": "Steve",
"age": "25",
"department": "Inventory",
"salary": "26000",
"description": "Belongs to Inventory dept."
},
{
"employeeName": "Peter",
"age": "54",
"department": "Aviation",
"salary": "16600",
"description": "Belongs to Aviation dept."
}
]
}
Please assume my JSON has more records than the example given above.
Thanks!
17:49
Moderators
30/10/2007
Offline
Hello,
It is better not to use addRowData, but use a data parameter in the grid. Look into the docs.
Do not use datatype as function, but in data parameter you can use the function and return the object.
In this case you will need to set datatype = local
Regards
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:28
16/11/2011
Offline
Right... addRowData is too bad for the performance, even the IE browser throws script error to load just 400-500 records. But changing the datatype to local increase the performance and help in loading large no. of records.
Most Users Ever Online: 715
Currently Online:
38 Guest(s)
Currently Browsing this Page:
1 Guest(s)
Top Posters:
OlegK: 1255
markw65: 179
kobruleht: 144
phicarre: 132
YamilBracho: 124
Renso: 118
Member Stats:
Guest Posters: 447
Members: 11373
Moderators: 2
Admins: 1
Forum Stats:
Groups: 1
Forums: 8
Topics: 10592
Posts: 31289
Newest Members:
, razia, Prankie, psky, praveen neelam, greg.valainis@pa-tech.comModerators: tony: 7721, Rumen[Trirand]: 81
Administrators: admin: 66
