Menu

Post image 1
Post image 2
1 / 2
0

Client-side pagination in vanilla JS: simple, lightweight, zero framework

DEV Community·Odilon HUGONNOT·26 days ago
#KefoECGU
Reading 0:00
15s threshold

The blog loads its articles from a posts.json via fetch() and renders them in vanilla JS. No framework, no build. With 7 articles it works perfectly. At 50 articles, you want pagination — for readability, not performance (the JSON stays lightweight anyway). The main constraint: no hidden elements in the DOM. The wrong way to do it: load everything then display: none what you don't show. The right way: only render the posts for the current page. The difference seems cosmetic on a personal blog. It reflects a working habit — don't put in the DOM what you don't display. The existing architecture The starting setup: fetch('posts.json') loads the manifest, articles are sorted by date, then render(allPosts) writes to #posts-container via innerHTML . The filterPosts() function filters the full array by category and text search. applyFilters() is called on every interaction — click on a filter, keystroke in the search field.…

Continue reading — create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.

Read More