remove datatables, more butiful pagination

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

@ -246,3 +246,19 @@ table {
}
}
}
.tbl-toolbar {
text-align: right;
.prev::before {
content: "<< ";
}
.next::after {
content: " >>";
}
button {
margin-right: @element-margin;
}
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 160 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 148 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 201 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 158 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 146 B

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

@ -57,39 +57,48 @@ document.addEventListener('DOMContentLoaded', function () {
})
}
function prevClick(tbl) {
function prevButton(tbl) {
const btn = document.createElement('button')
btn.classList.add('prev')
btn.innerText = 'Prev'
btn.addEventListener('click', function () {
const page = tbl.getAttribute('data-page') * 1
if (page > 0) {
tbl.setAttribute('data-page', page - 1)
toggleVisibilities(tbl, visibleRows(page - 1))
}
})
return btn;
}
function nextClick(tbl) {
function nextButton(tbl) {
const btn = document.createElement('button')
btn.classList.add('next')
btn.innerText = 'Next'
btn.addEventListener('click', function () {
const page = tbl.getAttribute('data-page') * 1
const lastRowNum = (page + 1) * pageSize
if (lastRowNum < tbl.tBodies[0].rows.length) {
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)
return btn
}
tbl.insertAdjacentElement('afterend', toolbar)
function addToolbar(tbl) {
const toolbarTop = document.createElement('section')
toolbarTop.classList.add('tbl-toolbar')
toolbarTop.insertAdjacentElement('beforeend', prevButton(tbl))
toolbarTop.insertAdjacentElement('beforeend', nextButton(tbl))
const toolbarBottom = document.createElement('section')
toolbarBottom.classList.add('tbl-toolbar')
toolbarBottom.insertAdjacentElement('beforeend', prevButton(tbl))
toolbarBottom.insertAdjacentElement('beforeend', nextButton(tbl))
tbl.insertAdjacentElement('afterend', toolbarTop)
tbl.insertAdjacentElement('beforebegin', toolbarBottom)
}
document.querySelectorAll('table').forEach(function (tbl) {
@ -101,19 +110,3 @@ document.addEventListener('DOMContentLoaded', function () {
dynamicTables()
})
/*
$(document).ready(function() {
$('table').DataTable({
stateSave: true,
fixedHeader: true,
lengthMenu: [[25, 50, 100, -1], [25, 50, 100, "All"]],
stateSaveCallback: function(settings,data) {
localStorage.setItem('DataTables', JSON.stringify(data))
},
stateLoadCallback: function(settings) {
return JSON.parse(localStorage.getItem('DataTables'))
}
})
})
*/

@ -45,12 +45,9 @@
[:meta {:name "viewport"
:content "width=device-width,initial-scale=1,shrink-to-fit=no"}]
[:title (str "wan ijo" (when title (str " - " title)))]
(include-css "/css/datatables.min.css"
"/css/app.css")
(include-css "/css/app.css")
(when devmode? (include-css "/css/devmode.css"))
(include-js "/js/jquery-3.3.1.slim.min.js"
"/js/datatables.min.js"
"/js/scripts.js")
(include-js "/js/scripts.js")
head]
[:body
[:section.grid

Loading…
Cancel
Save