0
166
ViewsHow do I paginate my posts from firestore to my Javascript web app. Am not using any framework except Node.js server
Below is the code I have tried.Am really new to programming
var records_per_page = 4;
var first = firebase.firestore().collection("Posts").limit(records_per_page);
first.get().then((snapshot)=>
{
document.getElementById("post-container").innerHTML = '';
snapshot.forEach(function (taskValue) {
if(snapshot.size >= 1){
showPosts(taskValue)
$("#next").click(function(){
var lastVisible = "";
lastVisible = snapshot.docs[snapshot.docs.length-1];
showMorePosts(records_per_page,lastVisible)
})
}
});
}
);
But the code fetches the first and second four documents only. I have created a gist here to show both methods showMorePosts(records_per_page,lastVisible) and showPosts(records_per_page). Stackoverflow doesn't allow me to add a lot of code.
2 answers
Answer question0
There are two ways to do this, one is by using the offset and other is by using the functions startsAfter() and limit().
You can use offset function to fetch the documents, but it is generally not a great option, because when you call this offset method in the server libraries, you still get billed for builds that you’re offsetting.
So, generally it is better to use startsAfter() and limit(), because those will only get billed for the actual work you’ve performed and none of the one you skipped.
Also you can try following this tutorial on Firestore Pagination for the beginners.
0
I managed to create some sort of pagination so that when a person clicks next button, the next set of four posts replaces the former, continuously. However, am still figuring out on how to implement the previous button functionality so a person can load the previous sets of posts without having to refresh the page. I created a gist here. You can check it out for further progress and advise.