pagination offset fix

client/res/templates/record/list.tpl

@@ -208,25 +208,23 @@
         </tbody>
     </table>
 
-    {{#unless hasPagination}}
-        {{#if showMoreEnabled}}
-            <div class="show-more{{#unless showMoreActive}} hidden{{/unless}}">
-                <a
-                    type="button"
-                    role="button"
-                    tabindex="0"
-                    class="btn btn-default btn-block"
-                    data-action="showMore"
-                    {{#if showCount}}title="{{translate 'Total'}}: {{totalCountFormatted}}"{{/if}}
-                >
-                    {{#if showCount}}
-                    <div class="pull-right text-muted more-count">{{moreCountFormatted}}</div>
-                    {{/if}}
-                    <span>{{translate 'Show more'}}</span>
-                </a>
-            </div>
-        {{/if}}
-    {{/unless}}
+    {{#if showMoreEnabled}}
+        <div class="show-more{{#unless showMoreActive}} hidden{{/unless}}">
+            <a
+                type="button"
+                role="button"
+                tabindex="0"
+                class="btn btn-default btn-block"
+                data-action="showMore"
+                {{#if showCount}}title="{{translate 'Total'}}: {{totalCountFormatted}}"{{/if}}
+            >
+                {{#if showCount}}
+                <div class="pull-right text-muted more-count">{{moreCountFormatted}}</div>
+                {{/if}}
+                <span>{{translate 'Show more'}}</span>
+            </a>
+        </div>
+    {{/if}}
 </div>
 
 {{else}}

client/src/collection.js

@@ -657,7 +657,9 @@ class Collection {
      * @returns {Promise}
      */
     nextPage() {
-        return this.setOffset(this.offset + this.maxSize);
+        const offset = this.offset + Math.max(this.maxSize, this.length);
+
+        return this.setOffset(offset);
     }
 
     /**
@@ -710,7 +712,7 @@ class Collection {
 
         this.offset = offset;
 
-        return this.fetch();
+        return this.fetch({maxSize: this.maxSize});
     }
 
     /**
@@ -751,6 +753,10 @@ class Collection {
      * @param {{
      *     remove?: boolean,
      *     more?: boolean,
+     *     offset?: number,
+     *     maxSize?: number,
+     *     orderBy?: string,
+     *     order?: 'asc'|'desc',
      * } & Object.<string, *>} [options] Options.
      * @returns {Promise}
      * @fires Collection#sync Unless `{silent: true}`.
@@ -767,20 +773,17 @@ class Collection {
 
         const length = this.length + this.lengthCorrection;
 
-        if (!('maxSize' in options)) {
-            options.data.maxSize = options.more ? this.maxSize : (
-                (length > this.maxSize) ? length : this.maxSize
-            );
+        if ('maxSize' in options) {
+            options.data.maxSize = options.maxSize;
+        } else {
+            options.data.maxSize = options.more ? this.maxSize : Math.max(length, this.maxSize);
 
             if (this.maxMaxSize && options.data.maxSize > this.maxMaxSize) {
                 options.data.maxSize = this.maxMaxSize;
             }
         }
-        else {
-            options.data.maxSize = options.maxSize;
-        }
 
-        options.data.offset = options.more ? length : this.offset;
+        options.data.offset = options.more ? (this.offset + length) : this.offset;
         options.data.orderBy = this.orderBy;
         options.data.order = this.order;
         options.data.where = this.getWhere();

client/src/views/record/list-pagination.js

@@ -57,6 +57,10 @@ class RecordListPagination extends View {
             noTotal: noTotal,
         };
     }
+
+    setup() {
+        this.listenTo(this.collection, 'sync', () => this.reRender());
+    }
 }
 
 export default RecordListPagination;

client/src/views/record/list.js

@@ -706,24 +706,25 @@ class ListRecordView extends View {
 
         if (page === 'current') {
             this.collection.fetch().then(() => onSync());
-        }
-        else {
-            if (page === 'next') {
-                this.collection.nextPage().then(() => onSync());
-            }
-            else if (page === 'previous') {
-                this.collection.previousPage().then(() => onSync());
-            }
-            else if (page === 'last') {
-                this.collection.lastPage().then(() => onSync());
-            }
-            else if (page === 'first') {
-                this.collection.firstPage().then(() => onSync());
-            }
+            this.deactivate();
 
-            this.trigger('paginate');
+            return;
         }
 
+        if (page === 'next') {
+            this.collection.nextPage().then(() => onSync());
+        }
+        else if (page === 'previous') {
+            this.collection.previousPage().then(() => onSync());
+        }
+        else if (page === 'last') {
+            this.collection.lastPage().then(() => onSync());
+        }
+        else if (page === 'first') {
+            this.collection.firstPage().then(() => onSync());
+        }
+
+        this.trigger('paginate');
         this.deactivate();
     }