JSGrid LoadData

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>
<h2>Grid with page loading</h2>
<div id="jsGridPageLoading"></div>

<h2>Grid without page loading</h2>
<div id="jsGrid"></div>

JavaScript

var the_data = "";

$("#jsGridPageLoading").jsGrid({
    height: 200,
    width: "100%",
    paging: true,
    autoload: true,
    pageLoading: true,
    
    controller: {
        loadData: function() {
            return { data: the_data, itemsCount: 2 }
        }
    },
    
    fields: [
        { name: "AccountName", type: "text", width: 150 },
        { name: "AccountNumber", type: "text", width: 150 },
        { name: "ContactNumber", type: "text", width: 150 },
        { name: "UserName", type: "text", width: 150 }
    ]
});
        
$("#jsGrid").jsGrid({
    height: 100,
    width: "100%",
    paging: true,
    autoload: true,
    
    controller: {
        loadData: function() {
            return [{"AccountName":"MyAccount","ContactNumber":"111-111-7890","AccountNumber":"123456789","UserName":"JaneDoe"}]; 
        }
    },
    
    fields: [
        { name: "AccountName", type: "text", width: 150 },
    ]
});

var the_test = `[{"AccountName":"MyAccountwewewe","ContactNumber":"111-111-7890","AccountNumber":"123456789","UserName":"JaneDoe"},{"AccountName":"dddddddd","ContactNumber":"155-111-7890","AccountNumber":"123456789","UserName":"Jadsdsdsdsdsd"}]`;