basic pagination

integration-tests
Josha von Gizycki 6 years ago
parent b546d68a2c
commit d60f7863db

@ -221,23 +221,22 @@ table {
margin-top: 1rem; margin-top: 1rem;
margin-bottom: 1rem; margin-bottom: 1rem;
td, th {
border-bottom: @border-stack;
padding: @text-padding-v * 2 @text-padding-h / 2h;
}
thead { thead {
position: sticky; position: sticky;
top: 0; top: 0;
background-color: @body-background-color; background-color: @body-background-color;
th { th {
padding: @text-padding-v @text-padding-h; padding: @text-padding-v @text-padding-h @text-padding-v + .3rem @text-padding-v;
border-bottom: @accent-border-width / 5 solid @ci-color;
} }
} }
tbody { tbody {
td {
border-bottom: @border-stack;
padding: @text-padding-v * 2 @text-padding-h / 2h;
}
input[type=submit] { input[type=submit] {
margin-bottom: 0; margin-bottom: 0;
} }

@ -43,24 +43,62 @@ document.addEventListener('DOMContentLoaded', function() {
}) })
function dynamicTables() { function dynamicTables() {
const pageSize = 25
const range = (x, y) => const range = (x, y) =>
x > y ? [] : [x, ...range(x + 1, y)]; x > y ? [] : [x, ...range(x + 1, y)];
const pageSize = 50
const colsFromThead = thead =>
[...thead.children[0].children].map(th => th.innerText)
const visibleRows = page => const visibleRows = page =>
range(page * pageSize, (page + 1) * pageSize - 1) range(page * pageSize, (page + 1) * pageSize - 1)
function toggleVisibilities(tbl, ixsToShow) {
const rows = [...tbl.tBodies[0].rows]
rows.forEach(function (row, ix) {
row.style.display = ixsToShow.includes(ix) ? 'table-row' : 'none';
})
}
function prevClick(tbl) {
const page = tbl.getAttribute('data-page') * 1
tbl.setAttribute('data-page', page - 1)
toggleVisibilities(tbl, visibleRows(page - 1))
}
function nextClick(tbl) {
const page = tbl.getAttribute('data-page') * 1
tbl.setAttribute('data-page', page + 1)
toggleVisibilities(tbl, visibleRows(page + 1))
}
function addToolbar(tbl) {
const toolbar = document.createElement('section')
toolbar.classList.add('tbl-toolbar')
const prevBtn = document.createElement('button')
prevBtn.classList.add('prev')
prevBtn.innerText = 'Prev'
prevBtn.addEventListener('click', function () {
prevClick(tbl)
})
toolbar.insertAdjacentElement('beforeend', prevBtn)
const nextBtn = document.createElement('button')
nextBtn.classList.add('next')
nextBtn.innerText = 'Next'
nextBtn.addEventListener('click', function () {
nextClick(tbl)
})
toolbar.insertAdjacentElement('beforeend', nextBtn)
tbl.insertAdjacentElement('afterend', toolbar)
}
document.querySelectorAll('table').forEach(function (tbl) { document.querySelectorAll('table').forEach(function (tbl) {
const thead = tbl.tHead toggleVisibilities(tbl, visibleRows(0))
const tbody = tbl.tBodies[0] tbl.setAttribute('data-page', 0)
const cols = colsFromThead(thead) addToolbar(tbl)
const rows = [...tbl.rows]
let page = 0
console.debug(visibleRows(1))
}) })
} }
dynamicTables() dynamicTables()
}) })

Loading…
Cancel
Save