jQuery Grid Plugin - jqGrid - Topic: page in pager is not visible

OlegK on page in pager is not visible

Tue, 07 Jun 2011 19:13:54 +0300

If you don't fix validation errors then you have much more probability that your page will look different in different web browsers or different versions of the same browser. It means that the web browser try to guess what you mean. So I try to validate my pages always in http://validator.w3.org/ and validate my JavaScript code in http://www.jslint.com/.

Best regards
Oleg

dranney on page in pager is not visible

Tue, 07 Jun 2011 18:33:07 +0300

Thanks!!! That's a great help. What are the ramefications of not fixing the errors that the validator flags?

OlegK on page in pager is not visible

Tue, 07 Jun 2011 16:08:11 +0300

You can fix the problem if you include CSS

body { font-size: 75%; }

on your page. Moreover you should always write the page in one HTML or XHTML dialect which you define in the corresponding <!DOCTYPE statement. You code looks mostly like HTML 4.01 (with exception of <br />) so you can use

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/str.....t;>

I recommend you additionally always verify your HTML markup in http://validator.w3.org/. You will see some small errors which you has.

The fixed code you will find here.

Best regards
Oleg

dranney on page in pager is not visible

Mon, 06 Jun 2011 16:04:34 +0300

Here's the page.

<html>
<head>
<title>AMAC Remedy</title>
<link type="text/css" href="static/styles/jquery.ui.all.css" rel="stylesheet">
<link type="text/css" href="static/styles/ui.jqgrid.css" rel="stylesheet">
<link type="text/css" href="static/styles/main.css" rel="stylesheet">
<script type="text/javascript" src="static/scripts/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="static/scripts/grid.locale-en.js"></script>
<script type="text/javascript" src="static/scripts/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="static/scripts/jquery-ui-1.8.13.custom.min.js"></script>
<script type="text/javascript" src="static/scripts/json2.js"></script>
</head>
<body>
<div id="af-logo"><img src="static/images/af-logo.png" /> <img src="static/images/afwa-logo.png" /></div>
<div id="header"><span class="title">AMAC Remedy</span><br /></div>
<div class="clear"></div>
<div id="contentMargin" >
<div id="content" >
<div id="tabs" >
  <ul>
   <li><a href="#tabs-1">Location List</a></li>
   <li><a href="#tabs-2">Program List</a></li>
  </ul>
<div id="tabs-1">
  <table id="locationList"></table>
  <div id="locationPager"></div>
</div>
<div id="tabs-2">
  <table id="programList"></table>
  <div id="programPager"></div>
</div>
</div>
</div>
</div>
<div id="ajaxMessage"></div>
</body>
<script type="text/javascript">
$(document).ready( function () {
$(function(){
  $('#tabs').tabs();
});
jQuery("#locationList").jqGrid({
    url:'locations',
  datatype: 'json',
    colNames:['Location Key','Location Name', 'Latitude', 'Longitude','Location Alias'],
    colModel:[
      {name:'locationKey',index:'locationKey', width:80},
      {name:'locationName',index:'locationName', width:150},
      {name:'latitude',index:'latitude', width:70},
      {name:'longitude',index:'longitude', width:70},
      {name:'locationAlias',index:'locationAlias', width:300, sortable:false}
    ],
    rowNum:25,
    rowList:[25,100,500],
    pager: '#locationPager',
    sortname: 'locationKey',
     altRows: true,
     viewrecords: true,
     sortorder: 'asc',
  jsonReader: {
   root: 'rows',
   page: 'page',
   total: 'total',
   records: 'records',
   repeatitems: false,
   id: 'locationKey'
  },
  width: 1040,
  height: 551
});
jQuery("#programList").jqGrid({
    url:'programs',
  datatype: 'json',
    colNames:['Program Key','Program Name', 'Program Id', 'Location Name','Program Status'],
    colModel:[
      {name:'programKey',index:'programKey', width:80},
      {name:'programName',index:'programName', width:100},
      {name:'programId',index:'programId', width:100},
      {name:'locationName',index:'locationName', width:150},
      {name:'programStatus',index:'programStatus', width:100}
    ],
    rowNum:25,
    rowList:[25,100,500],
    pager: '#programPager',
    sortname: 'programKey',
     altRows: true,
     viewrecords: true,
     sortorder: 'asc',
  jsonReader: {
   root: 'rows',
   page: 'page',
   total: 'total',
   records: 'records',
   repeatitems: false,
   id: 'programKey'
  },
  width: 1040,
  height: 551
});
});
</script>
</html>

Here's a sample json string:

{"total": 1, "page": 1, "records": 3, "rows": [{"locationKey":1,"locationName":"abc","latitude":36.03,"longitude":-74.96,"locationAlias":""}, {"locationKey":2,"locationName":"def","latitude":22.57,"longitude":-80.73,"locationAlias":""}, {"locationKey":3,"locationName":"sss","latitude":39.79,"longitude":12.44,"locationAlias":"lfjslfj sldjflsdkj sadlkjlsdkjf flkasdj"}

OlegK on page in pager is not visible

Sun, 05 Jun 2011 08:54:37 +0300

It is difficult to guess not haven seen the page about which you wrote. Could you post the URL to the page having the problem or post the full HTML page which can be used to reproduce your problem?

dranney on page in pager is not visible

Sat, 04 Jun 2011 20:32:22 +0300

When I remove jqGrid css from the page, the page number shows up ok, but obviously there are many other issues, so I added it back in. When I add the doctype, the page number looks good, but the View 1 -25 of 321 is cut off about 25% at the bottom. # 3 above had no effect. Do you have any other suggestions? Thanks!!!

OlegK on page in pager is not visible

Sat, 04 Jun 2011 18:54:03 +0300

You should do following:

verify that jQuery UI and jqGrid CSS are really loaded on the page
verify that <!DOCTYPE html ... is defined in the first row of your page
verify that you don't use Internet Explorer in some old compatibility mode. If it was your problem you can fix it by including meta like <meta http-equiv="X-UA-Compatible" content="IE=edge" /> on your page

Best regards
Oleg

dranney on page in pager is not visible

Sat, 04 Jun 2011 18:27:53 +0300

it appears that the input box for the page is too small. i can see only the top 25% of the page number. Does anyone know what the issue is?