Data Pagination and Filtering

Good day,

If I may humbly ask a little help, any hints, comments and suggestions are very much welcome, thank you in advance for all your help, please see question below, how do I code this?:

/* Create the showPage function This function will create and insert/append the elements needed to display a "page" of nine students */

/* Create the addPagination function This function will create and insert/append the elements needed for the pagination buttons */

// Call functions

My attempt:

onload = () => {

const doc = document, qsel = doc.querySelector.bind(doc), qall = doc.querySelectorAll.bind(doc), create = doc.createElement.bind(doc);

const students = qall(':not(.page) li');

const ipp = 9; // items per page

function showPage(page) { /* Create the showPage function This function will create and insert/append the elements needed to display a "page" of nine students */ const count = students.length; for (let i = 0; i < count; ++i) students[i].style.display = i < page*ipp && i >= (page-1)*ipp ? 'block' : 'none'; active(page); }

function addPagination() { /* Create the addPagination function This function will create and insert/append the elements needed for the pagination buttons */ const main = qsel('.page'), div = create('div'), ul = create('ul'), total = Math.ceil(students.length/ipp); main.appendChild(div); div.appendChild(ul); div.className = 'pagination'; for (let i = 0; i < total; ++i) { const li = create('li'), a = create('a'); Object.assign(a,{ href: '#', textContent: i+1 }); ul.appendChild(li).appendChild(a); } div.addEventListener('click',evt => { if (evt.target.nodeName != "A") return; const page = +evt.target.textContent, max = page*ipp, min = max-ipp; for (let i = 0; i < students.length; ++i) students[i].style.display = min <= i && i < max ? '' : 'none'; active(page); }); }

function active(page) { let e = qsel('.active'); e && e.classList.remove('active'); qall('a')[page-1].classList.add('active'); }

// Call functions addPagination(); showPage(1);

};