Revert a stupid mistake, make per-page work?

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);
-        }
     }
 
     /* Update the DOM to reflect the current state of the data we have loaded */

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(() => {
                         <td>${tags}</td>
                     </tr>`;
         },
-        filterCallback: dumbFilterCallback,
-        preFilter: myParam
+        filterCallback: dumbFilterCallback
     });
     faveTable.attach();
 });

theme/bulma/archive.php

@@ -46,6 +46,14 @@
                     <label><i class="fa fa-search"></i>
                         <input class="search" type="search" name="search" placeholder="Filter..."/>
                     </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>
                 <table id="archive" class="table is-fullwidth is-hoverable">
                     <thead>