jqGrid Data - xml

jqGrid v4.6

by 1004lucifer

HTML

<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/css/ui.jqgrid.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/i18n/grid.locale-kr.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/jquery.jqGrid.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css">
<table id="list"><tr><td></td></tr></table> 
<div id="pager"></div>

JavaScript

var serverXmlData =
`<invoices> 
   <request>true</request> 
   <currentpage>1</currentpage>
   <totalpages>10</totalpages>
   <totalrecords>20</totalrecords>
   <result> 
      <invoice> 
         <asin>1</asin>
         <invoiceno>data1</invoiceno>
         <invoicedate>data2</invoicedate> 
         <invoiceamount>data3</invoiceamount> 
         <invoicetax>data4</invoicetax> 
         <invoicetotal>data5</invoicetotal> 
         <notes>data6</notes> 
      </invoice> 
      <invoice> 
         <asin>2</asin>
         <invoiceno>data1</invoiceno>
         <invoicedate>data2</invoicedate> 
         <invoiceamount>data3</invoiceamount> 
         <invoicetax>data4</invoicetax> 
         <invoicetotal>data5</invoicetotal> 
         <notes>data6</notes> 
      </invoice> 
      <invoice> 
         <asin>2</asin>
         <invoiceno>data1</invoiceno>
         <invoicedate>data2</invoicedate> 
         <invoiceamount>data3</invoiceamount> 
         <invoicetax>data4</invoicetax> 
         <invoicetotal>data5</invoicetotal> 
         <notes>data6</notes> 
      </invoice> 
   </result> 
</invoices>`;

$("#list").jqGrid({
  url: '/echo/xml/', // use JSFiddle echo service
  datatype: 'xml',
  mtype: 'POST',
  postData: { xml: serverXmlData },
  colModel :[ 
    {name:'invoiceno', index:'invid', width:55}, 
    {name:'invoicedate', index:'invdate', width:90}, 
    {name:'invoiceamount', index:'amount', width:80, align:'right'}, 
    {name:'invoicetax', index:'tax', width:80, align:'right'}, 
    {name:'invoicetotal', index:'total', width:80, align:'right'}, 
    {name:'notes', index:'note', width:150, sortable:false} 
  ],
  xmlReader: { 
    root:"result", 
    row:"invoice",
    page:"invoices>currentpage", 
    total:"invoices>totalpages", 
    records:"invoices>totalrecords",
    repeatitems:false,
    id : "asin"
  },
  caption : 'XML Data',
  height: 'auto',
  autowidth: true,
  rowNum: 5,
  pager: '#pager'
});