<?php include(mvc::$cfg['PATH_TPL'].'public/header.php');?>
<body class="gray-bg">
<div style="margin-left:20px">
    <table id="jqGrid"></table>
    <div id="jqGridPager"></div>
	<button id="export">export</button>
</div>
    <script type="text/javascript"> 
        $(document).ready(function () {
            $("#jqGrid").jqGrid({
                url: 'http://trirand.com/blog/phpjqgrid/examples/jsonp/getjsonp.php?callback=?&qwery=longorders',
                mtype: "GET",
				styleUI : 'Bootstrap',
                datatype: "jsonp",
                colModel: [
                    { label: 'OrderID', name: 'OrderID', key: true, width: 75 },
                    { label: 'Customer ID', name: 'CustomerID', width: 150 },
                    { label: 'Order Date', name: 'OrderDate', width: 150 },
                    { label: 'Freight', name: 'Freight', width: 150 },
                    { label:'Ship Name', name: 'ShipName', width: 150 }
                ],
				viewrecords: true,
                height: 250,
                rowNum: 20,
                pager: "#jqGridPager"
            });
		$("#jqGrid").jqGrid('navGrid','#jqGridPager',
			{edit:false,add:false,del:false},
			{},
			{},
			{},
			{multipleSearch:true, multipleGroup:true}
		);
		$("#export").on("click", function(){
				$("#jqGrid").jqGrid("exportToCsv",{
					separator: ",",
					separatorReplace : "", // in order to interpret numbers
					quote : '"', 
					escquote : '"', 
					newLine : "\r\n", // navigator.userAgent.match(/Windows/) ?	'\r\n' : '\n';
					replaceNewLine : " ",
					includeCaption : true,
					includeLabels : true,
					includeGroupHeader : true,
					includeFooter: true,
					fileName : "jqGridExport.csv",
					returnAsString : false
				})
			})
        });
 
   </script>
<?php include(mvc::$cfg['PATH_TPL'].'public/footer.php');?>