JSGrid Clear Data

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>
<button id="clear">Clear Data</button>
<div id="jsgrid"></div>

CSS

.ui-widget {
    font-size: 12px;
}

JavaScript

var data = [
    { FirstName: "John", LastName: "White" },
    { FirstName: "Jimmy", LastName: "Black" },
    { FirstName: "Tom", LastName: "Smitt" },
    { FirstName: "Frank", LastName: "Don" },
    { FirstName: "Peter", LastName: "Brown" }
];

$("#clear").on("click", function() {
    data = [];
   // $("#jsgrid").jsGrid("search");
});

$("#jsgrid").jsGrid({
    autoload: true,
    width: 200,
    controller: {
        loadData: function() {
            return data;
        }
    },
    fields: [
        { type: "text", name: "FirstName" },
        { type: "text", name: "LastName" }
    ]
});