diff --git a/js/data_tables.js b/js/data_tables.js index 877b5eb..f5a2f17 100644 --- a/js/data_tables.js +++ b/js/data_tables.js @@ -92,7 +92,6 @@ class DataTable { this.filterCallback = options.filterCallback; this.sortField = null; this.sortDir = true; - this.reverseRowCallback = options.reverseRowCallback; } attach() { @@ -109,6 +108,15 @@ class DataTable { } } + this.perPageField = this.container.querySelector('select[name=per_page]'); + + if (this.perPageField) { + this.perPageField.addEventListener('change', evt => { + this.perPage = Number(evt.target.value); + this._updatePage(0); + }); + } + const header = this.element.querySelector('tr.paginator__sort'); if (header) { @@ -137,16 +145,11 @@ class DataTable { /* Load the requested data from the server, and when done, update the DOM. */ _loadEntries() { - if (this.ajaxCallback) { - new Promise(this.ajaxCallback) - .then(data => { - this.unfilteredData = data.data; - this._updateFilter(this.options.preFilter); - }); - } else if (this.reverseRowCallback) { - this.unfilteredData = Array.prototype.map.call(this.element.querySelectorAll('tr'), this.reverseRowCallback).filter(row => row); - this._updateFilter(this.options.preFilter); - } + new Promise(this.ajaxCallback) + .then(data => { + this.unfilteredData = data.data; + this._updateFilter(this.options.preFilter); + }); } /* Update the DOM to reflect the current state of the data we have loaded */ diff --git a/js/user_profile.js b/js/user_profile.js index b76b339..aa8a0f7 100644 --- a/js/user_profile.js +++ b/js/user_profile.js @@ -15,8 +15,13 @@ whenReady(() => { const urlParams = new URLSearchParams(window.location.search); const myParam = urlParams.get('q'); - const table = new DataTable(document.getElementById('archive'), { - reverseRowCallback: parsePasteInfo, + const myPastesElem = document.getElementById('archive'); + const table = new DataTable(myPastesElem, { + ajaxCallback: (resolve) => { + resolve({ + data: Array.prototype.map.call(myPastesElem.querySelectorAll('tbody > tr'), parsePasteInfo) + }); + }, rowCallback: (rowData) => { const tags = rowData.tags.map((tagData) => { let tagColorClass; @@ -48,8 +53,18 @@ whenReady(() => { }); table.attach(); - const faveTable = new DataTable(document.getElementById('favs'), { - reverseRowCallback: parsePasteInfo, + const myFavesElem = document.getElementById('favs'); + + if (!myFavesElem) { + return; + } + + const faveTable = new DataTable(myFavesElem, { + ajaxCallback: (resolve) => { + resolve({ + data: Array.prototype.map.call(myFavesElem.querySelectorAll('tbody > tr'), parsePasteInfo) + }); + }, rowCallback: (rowData) => { const tags = rowData.tags.map((tagData) => { let tagColorClass; @@ -80,8 +95,7 @@ whenReady(() => {