I use Ajax to load data into the jsGrid.
I have the following code:
$("#jsGrid").jsGrid({
width: "100%",
height: "100%",
autoload: true,
paging: true,
pageSize: 15,
pageButtonCount: 5,
pageIndex: 1,
controller: {
loadData: function(filter) {
var d = $.Deferred();
$.ajax({ url: "/api/index.php/get_data",
contentType: "application/json; charset=utf-8",
data: {a:(filter.page?filter.page:0)},
dataType: "json"
}).done(function(response){
console.info(response);
d.resolve(response);
});
return d.promise();
}
},
fields: [
{ name: "ID", type: "number", width:50 },
{ name: "platform", type: "text", width: 100 },
{ name: "title", type: "text", width: 150 },
{ name: "url_image", type: "text", width: 200 },
{ name: "url", type: "text", width: 200 },
{ name: "cost", type: "text", width: 50 }
]
});
});
The ajax call returns an array of objects but it does not populate in the table.
What's wrong?
The ajax call returns an array of objects but it does not populate in the table.
What's wrong?
First: ajax is by itself a promise, so you may return itself.
Second: height: "100%",: this will set the height to a little value (on my computer the value of ".jsgrid-grid-body" is only 3px!!!). You may use the default value or set another one.
The snippet:
$("#jsGrid").jsGrid({
width: "100%",
height: "auto",
autoload: true,
paging: true,
pageSize: 5,
pageButtonCount: 5,
pageIndex: 1,
controller: {
loadData: function(filter) {
return $.ajax({
url: "https://api.github.com/repositories",
dataType: "json"
});
}
},
fields: [
{name: "name", width: 50},
{name: "full_name", width: 100}
]
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"></script>
<div id="jsGrid"></div>