Untitled

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DT…..">
<html xmlns="http://www.w3.org/1999/xhtml&quot; xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My First Grid</title>

<link rel="stylesheet" type="text/css" media="screen" href="css/smoothness/jquery-ui-1.8.16.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />

<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.jqGrid.min.js"></script>

<style>
html, body {
    margin: 0;
    padding: 0;
    font-size: 75%;
}
</style>

<script type="text/javascript">

$(function(){

  mygrid = $("#list");

  mygrid.jqGrid({
    url:'example.php',
    datatype: 'xml',
    mtype: 'GET',
    colNames:['Inv No','Date', 'Amount','Tax','Total','Notes'],
    colModel :[
      {name:'invid', index:'invid', width:55},
      {name:'invdate', index:'invdate', width:90},
      {name:'amount', index:'amount', width:80, align:'right', edittype:'select', search:true , stype:'select',
      searchoptions:{value:':All;8:8.00;6:6.00'}},
      {name:'tax', index:'tax', width:80, align:'right'},
      {name:'total', index:'total', width:80, align:'right', sortable:true},
      {name:'note', index:'note', width:150, sortable:false, align:'center'}
    ],
    pager: '#pager',
    rowNum:10,
    rowList:[10,20,30],
    sortname: 'tax',
    sortorder: 'desc',
    viewrecords: true,
    gridview: true,
    caption: 'My first grid'
  });
  // Search toolbar.
  mygrid.jqGrid('filterToolbar', {stringResult: true, searchOnEnter: false, defaultSearch : "bw"});

});
</script>

</head>
<body>

<table id="list"><tr><td/></tr></table>
<div id="pager"></div>

</body>
</html>