JavaScript Grid

Bind to the sort event by type: jqxGrid. Author: http://jqwidgets.com

by Petko Bossakov

HTML

<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<script src="https://jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/generatedata.js"></script>
<script src="http://www.gsped.it/jqwidgets/jqxcore.js"></script>
<script src="http://www.gsped.it/jqwidgets/jqxdata.js"></script>
<script src="http://www.gsped.it/jqwidgets/jqxgrid.js"></script>
<script src="http://www.gsped.it/jqwidgets/jqxgrid.sort.js"></script>
<script src="http://www.gsped.it/jqwidgets/jqxgrid.pager.js"></script>
<script src="http://www.gsped.it/jqwidgets/jqxgrid.filter.js"></script>
<script src="http://www.gsped.it/jqwidgets/jqxgrid.selection.js"></script>
<script src="http://www.gsped.it/jqwidgets/jqxgrid.edit.js"></script>
<script src="http://www.gsped.it/jqwidgets/jqxscrollbar.js"></script>
<script src="http://www.gsped.it/jqwidgets/jqxbuttons.js"></script>
<script src="http://www.gsped.it/jqwidgets/jqxmenu.js"></script>
Click on a column header to sort the data
<div id='jqxWidget'>
    <div id="jqxgrid"></div>
</div>

JavaScript

var data = [{"data_ora":"2015-09-30 16:47:34","id":"19","destinatari":""},{"data_ora":"2015-09-30 16:41:11","id":"17","destinatari":""},{"data_ora":"2015-09-30 16:28:04","id":"16","destinatari":""},{"data_ora":"2015-09-30 16:21:53","id":"15","destinatari":""},{"data_ora":"2015-09-30 16:13:45","id":"14","destinatari":""},{"data_ora":"2015-09-30 16:08:26","id":"13","destinatari":""},{"data_ora":"2015-09-30 16:05:29","id":"12","destinatari":""},{"data_ora":"2015-09-29 15:23:55","id":"5","destinatari":""},{"data_ora":"2015-09-29 15:21:16","id":"4","destinatari":""},{"data_ora":"2015-09-29 15:20:28","id":"3","destinatari":""},{"data_ora":"2015-09-29 15:18:35","id":"2","destinatari":""},{"data_ora":"2015-09-29 15:17:21","id":"1","destinatari":""}];

 var source = {
     localdata: data,
     datafields: [
			{ name: 'id', type: 'int' },
			{ name: 'data_ora', type: 'string' },
			{ name: 'destinatari', type: 'string' }
		],
     datatype: "array"
 };

 var adapter = new $.jqx.dataAdapter(source);
 $("#jqxgrid").jqxGrid({
     width: 500,
     theme: 'energyblue',
     source: adapter,
     sortable: true,
     columns: [{
         text: 'Data / Ora',
         datafield: 'data_ora',
         width: 200
     }, {
         text: 'Destinatario',
         datafield: 'destinatario',
         width: 200
     }, {
         text: '',
         datafield: '',
         width: 200
     }]
 });