JavaScript Grid

Invoke the getsortinformation method of the jqxGrid. Author: http://jqwidgets.com

by jqwidgets

HTML

<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<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>
<div id='jqxWidget'>
    <div id="jqxgrid"></div>
</div>
<input type="button" style="margin: 50px;" id="jqxbutton" value="Get sorting information" />

JavaScript

var data = generatedata(500);
  var source = {
      localdata: data,
      datafields: [{
          name: 'firstname',
          type: 'string'
      }, {
          name: 'lastname',
          type: 'string'
      }, {
          name: 'productname',
          type: 'string'
      }, {
          name: 'date',
          type: 'date'
      }, {
          name: 'quantity',
          type: 'number'
      }, {
          name: 'price',
          type: 'number'
      }],
      datatype: "array",
      sortcolumn: 'firstname',
      sortdirection: 'asc'
  };

  var adapter = new $.jqx.dataAdapter(source);
  $("#jqxgrid").jqxGrid({
      width: 600,
      theme: 'energyblue',
      source: adapter,
      sortable: true,
      selectionmode: 'singlecell',
      columns: [{
          text: 'First Name',
          datafield: 'firstname',
          columngroup: 'Name',
          width: 90
      }, {
          text: 'Last Name',
          columngroup: 'Name',
          datafield: 'lastname',
          width: 90
      }, {
          text: 'Product',
          datafield: 'productname',
          width: 170
      }, {
          text: 'Order Date',
          datafield: 'date',
          width: 160,
          cellsformat: 'dd-MMMM-yyyy'
      }, {
          text: 'Quantity',
          datafield: 'quantity',
          width: 80,
          cellsalign: 'right'
      }, {
          text: 'Unit Price',
          datafield: 'price',
          cellsalign: 'right',
          cellsformat: 'c2'
      }],
  });

  $("#jqxbutton").jqxButton({
      theme: 'energyblue',
      width: 200,
      height: 30
  });

  $('#jqxbutton').click(function () {
      var sortinformation = $('#jqxgrid').jqxGrid('getsortinformation');
      // The sortcolumn represents the sort column's datafield. If there's no sort column, the sortcolumn is null.                            
      var sortcolumn = sortinformation.sortcolumn;
      // The sortdirection is an object with two fields: 'ascending' and...