I have a grid in jsGrid that refreshes every 5 seconds. While filtering is fine and it remains on refresh, sorting the tables does not. Once the refresh hits the table automatically goes back to its unsorted, default, order.
Is there any way to get the JsGrid to keep its sorting on refresh?
Here's my code:
$("#jsGrid").jsGrid({
height: "300px",
width: "100%",
filtering: true,
sorting: true,
paging: true,
autoload: true,
pageSize: 10,
controller: {
loadData: function(filter) {
var data = $.Deferred();
$.ajax({
type: "GET",
url: BASE_URL,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {
//SUCCESS MESSAGE
},
error: function(textStatus, errorThrown) {
//ERROR MESSAGE
}
}).then(function(result) {
result = $.grep(result,
function(item) {
return //FILTERED RESULTS;
});
data.resolve(result);
});
return data.promise();
}
},
//SAMPLE FIELDS
fields: [{
name: "Name",
type: "text",
width: 150
},
{
name: "Age",
type: "number",
width: 50
},
{
name: "Address",
type: "text",
width: 200
},
{
name: "Country",
type: "select",
}
]
});
setInterval(function() {
//Refreshes grid only after 5 seconds
$("#jsGrid").jsGrid("loadData");
}, 5000);
Found an answer! A thread was posted yesterday onto GitHub for someone looking for the same thing I was:
The answer was inside my setInterval
function to call the .done
function and call the jsGrid sorter in there. :
setInterval(function() {
//Refreshes grid only after 5 seconds
$('#jsGrid').jsGrid("loadData").done(function () {
var sorting = $("#jsGrid").jsGrid("getSorting");
$("#jsGrid").jsGrid("sort", sorting);
}, 5000);