I'm dealing with a problem. I have a simple query in Parse.com Javascript SDK which runs when the pages loads.
function start() {
Parse.initialize("ID", "JSKEY");
var query = new Parse.Query("events");
query.ascending("eventDate");
query.limit(20);
//query.skip(0); maybe?
query.find({
success: function(results) {
for (var i = 0; i < results.length; i++) {
var controlEv = results[i];
var nameHTML = document.createTextNode(controlEv.get('name'));
document.getElementById('theName').appendChild(nameHTML);
}
},
error: function(error) {
alert("Error: " + error.code + " " + error.message);
}
});
}
<body id="top" onload="start();">
<p id="theName"></p>
So now with this query i get 20 event results from parse.com But the table rows are lets say 100... I want to make a button that will load the next 20 and if i push it again it will load the next 20 etc.
Does anyone have any solution about it or dealt with it??
I havent tried anything but i guess it has something to do with query.skip and query.limit
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="http://www.parsecdn.com/js/parse-latest.js"></script>
<script>
var x = 20;
var y = 0;
function start() {
Parse.initialize("ID", "KEY");
var query = new Parse.Query("events");
query.ascending("eventDate");
query.limit(x);
query.skip(y);
query.find({
success: function(results) {
for (var i = 0; i < results.length; i++) {
var controlEv = results[i];
var nameHTML = document.createTextNode(controlEv.get('name'));
document.getElementById('theName').appendChild(nameHTML);
}
x = x + 20;
y = y + 20;
console.log(results.length);
},
error: function(error) {
alert("Error: " + error.code + " " + error.message);
}
});
}
</script>
</head>
<body id="top" onload="start();">
<p id="theName"></p>
<button type="button" onclick="start()">Click Me!</button>
</body>
</html>
I think this is the best way so far and you dont have to worry also about limit 10000 that parse has.