jsGrid - Page loading sorting

HTML

<link rel="stylesheet" href="http://js-grid.com/css/jsgrid.min.css">
<link rel="stylesheet" href="http://js-grid.com/css/jsgrid-theme.min.css">
<script src="http://js-grid.com/js/jsgrid.min.js"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/redmond/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<div id="jsGrid"></div>

JavaScript

var data = [
    {
        "Name": "Otto Clay",
        "Married": false
    },
    {
        "Name": "Connor Johnston",
        "Married": false
    },
    {
        "Name": "Lacey Hess",
        "Married": false
    },
    {
        "Name": "Clay Henson",
        "Married": false
    },
    {
        "Name": "Hess Hess",
        "Married": false
    },
    {
        "Name": "Hess Henson",
        "Married": false
    },
    {
        "Name": "Connor Hess",
        "Married": false
    },
    {
        "Name": "Timothy Henson",
        "Married": false
    }
];

$("#jsGrid").jsGrid({
  height: "150px",
  width: "100%",

  autoload: true,
  filtering:true,
  sorting: true,
  paging: true,
  pageLoading: true,
  pageSize: 2,

  controller: {
    loadData: function(filter) {
      var d = $.Deferred();

      setTimeout(function() {
      	// Sort data on the server
        console.log("sorting by:", filter.sortField, filter.sortOrder);
        var startIndex = (filter.pageIndex - 1) * filter.pageSize;

        d.resolve({
          data: data.slice(startIndex, startIndex + filter.pageSize),
          itemsCount: data.length
        });	
      });

      return d.promise();
    }
  },

  fields: [
    { name: "Name", type: "text", width: 150 },
    { name: "Married", type: "checkbox", title: "Is Married" }
  ]

});