Forum
Log In
Home
Topic RSS
11:42
23/11/2009
Offline
Hello everybody,
I am new to jQgrid, and would like to use it.
I want to set data source from array data, client side.
But, when I do so, I don't obtain the pagination, I only have a scroll bar on left side of the grid, with all the items in the same page.
Can someone help me please?
Following my code, in main part copied from the tutorial of 3.4.4 version
Thank you!
<html>
<head>
<title>jqGrid Demo
</title>
<link rel="stylesheet" type="text/css" media="screen" href="themes/basic/grid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="themes/jqModal.css" />
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.jqGrid.js" type="text/javascript"></script>
<script src="js/jqModal.js" type="text/javascript"></script>
<script src="js/jqDnR.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#list").jqGrid({
datatype: 'local',
colNames:['Inv No','Date', 'Amount','Tax','Total','Notes'],
colModel :[
{name:'invid',index:'invid', width:55, sorttype:'int'},
{name:'invdate',index:'invdate', width:90, sorttype:'date', datefmt:'Y-m-d'},
{name:'amount',index:'amount', width:80, align:'right',sorttype:'float'},
{name:'tax',index:'tax', width:80, align:'right',sorttype:'float'},
{name:'total',index:'total', width:80,align:'right',sorttype:'float'},
{name:'note',index:'note', width:150, sortable:false} ],
pager: jQuery('#pager'),
rowNum:3,
viewrecords: true,
imgpath: 'themes/basic/images',
caption: 'My first grid'
}).navGrid("#pager",{edit:false,add:false,del:false});
for (var i = 0; i<data.length; i++){
jQuery("#list").addRowData(i+1, data[i]);
}
});
</script>
</head>
<body>
<script>
var data = [
{
invid:"3",
invdate:"2007-10-01",
note:"note",
amount:"200.00",
tax:"10.00",
total:"210.00"},
{
invid:"44",
invdate:"2007-10-01",
note:"note",
amount:"200.00",
tax:"10.00",
total:"210.00"},
{
invid:"55",
invdate:"2007-10-01",
note:"note",
amount:"200.00",
tax:"10.00",
total:"210.00"},
{
invid:"66",
invdate:"2007-10-01",
note:"note",
amount:"200.00",
tax:"10.00",
total:"210.00"}, {
invid:"3",
invdate:"2007-10-01",
note:"note",
amount:"200.00",
tax:"10.00",
total:"210.00"},
{
invid:"44",
invdate:"2007-10-01",
note:"note",
amount:"200.00",
tax:"10.00",
total:"210.00"},
{
invid:"55",
invdate:"2007-10-01",
note:"note",
amount:"200.00",
tax:"10.00",
total:"210.00"},
{
invid:"66",
invdate:"2007-10-01",
note:"note",
amount:"200.00",
tax:"10.00",
total:"210.00"},{
invid:"3",
invdate:"2007-10-01",
note:"note",
amount:"200.00",
tax:"10.00",
total:"210.00"},
{
invid:"44",
invdate:"2007-10-01",
note:"note",
amount:"200.00",
tax:"10.00",
total:"210.00"},
{
invid:"55",
invdate:"2007-10-01",
note:"note",
amount:"200.00",
tax:"10.00",
total:"210.00"},
{
invid:"66",
invdate:"2007-10-01",
note:"note",
amount:"200.00",
tax:"10.00",
total:"210.00"}, {
invid:"3",
invdate:"2007-10-01",
note:"note",
amount:"200.00",
tax:"10.00",
total:"210.00"},
{
invid:"44",
invdate:"2007-10-01",
note:"note",
amount:"200.00",
tax:"10.00",
total:"210.00"},
{
invid:"55",
invdate:"2007-10-01",
note:"note",
amount:"200.00",
tax:"10.00",
total:"210.00"},
{
invid:"66",
invdate:"2007-10-01",
note:"note",
amount:"200.00",
tax:"10.00",
total:"210.00"}
];
</script>
<table id="list" class="scroll">
</table>
<div id="pager" class="scroll" style="text-align:center;">
</div>
</body>
</html>
Most Users Ever Online: 715
Currently Online:
72 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
