Revert a stupid mistake, make per-page work?

This commit is contained in:
Floorb 2022-03-13 13:32:07 -04:00
parent f14cf0b6b9
commit 69d1ab44ce
3 changed files with 42 additions and 17 deletions

View file

@ -92,7 +92,6 @@ class DataTable {
this.filterCallback = options.filterCallback; this.filterCallback = options.filterCallback;
this.sortField = null; this.sortField = null;
this.sortDir = true; this.sortDir = true;
this.reverseRowCallback = options.reverseRowCallback;
} }
attach() { 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'); const header = this.element.querySelector('tr.paginator__sort');
if (header) { if (header) {
@ -137,16 +145,11 @@ class DataTable {
/* Load the requested data from the server, and when done, update the DOM. */ /* Load the requested data from the server, and when done, update the DOM. */
_loadEntries() { _loadEntries() {
if (this.ajaxCallback) { new Promise(this.ajaxCallback)
new Promise(this.ajaxCallback) .then(data => {
.then(data => { this.unfilteredData = data.data;
this.unfilteredData = data.data; this._updateFilter(this.options.preFilter);
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);
}
} }
/* Update the DOM to reflect the current state of the data we have loaded */ /* Update the DOM to reflect the current state of the data we have loaded */

View file

@ -15,8 +15,13 @@ whenReady(() => {
const urlParams = new URLSearchParams(window.location.search); const urlParams = new URLSearchParams(window.location.search);
const myParam = urlParams.get('q'); const myParam = urlParams.get('q');
const table = new DataTable(document.getElementById('archive'), { const myPastesElem = document.getElementById('archive');
reverseRowCallback: parsePasteInfo, const table = new DataTable(myPastesElem, {
ajaxCallback: (resolve) => {
resolve({
data: Array.prototype.map.call(myPastesElem.querySelectorAll('tbody > tr'), parsePasteInfo)
});
},
rowCallback: (rowData) => { rowCallback: (rowData) => {
const tags = rowData.tags.map((tagData) => { const tags = rowData.tags.map((tagData) => {
let tagColorClass; let tagColorClass;
@ -48,8 +53,18 @@ whenReady(() => {
}); });
table.attach(); table.attach();
const faveTable = new DataTable(document.getElementById('favs'), { const myFavesElem = document.getElementById('favs');
reverseRowCallback: parsePasteInfo,
if (!myFavesElem) {
return;
}
const faveTable = new DataTable(myFavesElem, {
ajaxCallback: (resolve) => {
resolve({
data: Array.prototype.map.call(myFavesElem.querySelectorAll('tbody > tr'), parsePasteInfo)
});
},
rowCallback: (rowData) => { rowCallback: (rowData) => {
const tags = rowData.tags.map((tagData) => { const tags = rowData.tags.map((tagData) => {
let tagColorClass; let tagColorClass;
@ -80,8 +95,7 @@ whenReady(() => {
<td>${tags}</td> <td>${tags}</td>
</tr>`; </tr>`;
}, },
filterCallback: dumbFilterCallback, filterCallback: dumbFilterCallback
preFilter: myParam
}); });
faveTable.attach(); faveTable.attach();
}); });

View file

@ -46,6 +46,14 @@
<label><i class="fa fa-search"></i> <label><i class="fa fa-search"></i>
<input class="search" type="search" name="search" placeholder="Filter..."/> <input class="search" type="search" name="search" placeholder="Filter..."/>
</label> </label>
Show&nbsp;
<select name="per_page">
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
&nbsp;per page
</div> </div>
<table id="archive" class="table is-fullwidth is-hoverable"> <table id="archive" class="table is-fullwidth is-hoverable">
<thead> <thead>