Just for fun I am trying to create a generic paginator in Javascript.
That is just a draft, here is the function to create a 'paginator'.
const create_paginator = function ({fetcher, viewer,items, page_size, maxitems}) {
let offset = 0;
let data = [];
function fetch_data () {
return async function* (dir) {
offset += 1 * dir * page_size;
log.innerText = offset ;
const resp = await (await fetcher(offset, page_size)).json();
yield resp;
}
}
async function paginator (dir = 1) {
const iterator = fetch_data (fetcher);
if ((offset == 95 && dir == 1) || (offset == 0 && dir == -1)) return ;
for await (const page of iterator(dir)) {
data = Array.from (page[items]);
viewer(data);
}
}
return paginator;
};
Here is the way to use it :
function viewer(data) {
result.innerHTML = '';
data.forEach (u => result.innerHTML += `
<d-user>${u.firstName}</d-user>
`);
}
const fetcher = (offset = 0, pagesize = 0) =>
fetch (`https://dummyjson.com/users?skip=${offset}&limit=${pagesize}`);
let showPage = create_paginator({
fetcher,
viewer,
items: "users",
page_size: 5,
maxitems: 100
});
I will explain the code and clean it in later posts
For now, you can play with it here : Paginator
Top comments (0)