Pagination for missing is alive!

UI/JsLibraries/backbone.backgrid.paginator.js

@@ -58,7 +58,7 @@
        @param {boolean} [options.fastForwardHandleLabels] Whether to render fast forward buttons.
     */
     initialize: function (options) {
-      Backgrid.requireOptions(options, ["columns", "collection"]);
+      //Backgrid.requireOptions(options, ["columns", "collection"]);
 
       this.columns = options.columns;
       if (!(this.columns instanceof Backbone.Collection)) {

UI/Missing/Collection.js

@@ -4,10 +4,6 @@ define(['app', 'Series/EpisodeModel'], function () {
         url       : NzbDrone.Constants.ApiRoot + '/missing',
         model     : NzbDrone.Series.EpisodeModel,
 
-        comparator: function (model) {
-            return model.get('airDate');
-        },
-
         state: {
             pageSize: 10,
             sortKey: "airDate",
@@ -18,12 +14,24 @@ define(['app', 'Series/EpisodeModel'], function () {
             totalPages: null,
             totalRecords: null,
             pageSize: 'pageSize',
-            sortKey: "sortBy",
-            order: "direction",
+            sortKey: "sortKey",
+            order: "sortDir",
             directions: {
                 "-1": "asc",
                 "1": "desc"
             }
+        },
+
+        parseState: function (resp, queryParams, state) {
+            return {totalRecords: resp.totalRecords};
+        },
+
+        parseRecords: function (resp) {
+            if (resp) {
+                return resp.records;
+            }
+
+            return resp;
         }
     });
 });

UI/Missing/MissingLayout.js

@@ -13,7 +13,8 @@ define([
 
             regions: {
                 missing: '#x-missing',
-                toolbar: '#x-toolbar'
+                toolbar: '#x-toolbar',
+                pager  : '#x-pager'
             },
 
             showTable: function () {
@@ -48,6 +49,12 @@ define([
                         editable  : false,
                         cell      : 'airDate',
                         headerCell: 'nzbDrone'
+//                        headerCell: Backgrid.NzbDroneHeaderCell.extend({
+//                                initialize: function(options) {
+//                                    this.constructor.__super__.initialize.apply(this, [options]);
+//                                    this.direction('descending');
+//                                }
+//                            })
                     },
                     {
                         name      : 'edit',
@@ -66,6 +73,13 @@ define([
                         collection: this.missingCollection,
                         className : 'table table-hover'
                     }));
+
+                this.pager.show(new Backgrid.NzbDronePaginator({
+                    columns: columns,
+                    collection: this.missingCollection
+                }));
+
+                this.missingCollection.getFirstPage();
             },
 
             initialize: function () {

UI/Missing/MissingLayoutTemplate.html

@@ -4,3 +4,8 @@
         <div id="x-missing"></div>
     </div>
 </div>
+<div class="row">
+    <div class="span12">
+        <div id="x-pager"></div>
+    </div>
+</div>

UI/Mixins/backbone.Backgrid.mixin.js

@@ -40,6 +40,40 @@ Backgrid.NzbDroneHeaderCell = Backgrid.HeaderCell.extend({
         return this._direction;
     },
 
+    onClick: function (e) {
+        e.preventDefault();
+
+        var columnName = this.column.get("name");
+
+        if (this.column.get("sortable")) {
+            if (this.direction() === "ascending") {
+                this.sort(columnName, "descending", function (left, right) {
+                    var leftVal = left.get(columnName);
+                    var rightVal = right.get(columnName);
+                    if (leftVal === rightVal) {
+                        return 0;
+                    }
+                    else if (leftVal > rightVal) { return -1; }
+                    return 1;
+                });
+            }
+            else if (this.direction() === "descending") {
+                this.sort(columnName, "ascending");
+            }
+            else {
+                this.sort(columnName, "ascending", function (left, right) {
+                    var leftVal = left.get(columnName);
+                    var rightVal = right.get(columnName);
+                    if (leftVal === rightVal) {
+                        return 0;
+                    }
+                    else if (leftVal < rightVal) { return -1; }
+                    return 1;
+                });
+            }
+        }
+    },
+
     _convertDirectionToIcon: function (dir) {
         if (dir === 'ascending') {
             return 'icon-sort-up';
@@ -47,4 +81,69 @@ Backgrid.NzbDroneHeaderCell = Backgrid.HeaderCell.extend({
 
         return 'icon-sort-down';
     }
+});
+
+Backgrid.NzbDronePaginator = Backgrid.Extension.Paginator.extend({
+
+    events: {
+        "click a": "changePage",
+        "click i": "preventLinkClick"
+    },
+
+    windowSize: 1,
+
+    fastForwardHandleLabels: {
+        first: '<i class="icon-fast-backward"></i>',
+        prev: '<i class="icon-backward"></i>',
+        next: '<i class="icon-forward"></i>',
+        last: '<i class="icon-fast-forward"></i>'
+    },
+
+    changePage: function (e) {
+        e.preventDefault();
+
+        var target = $(e.target);
+
+        if (target.closest('li').hasClass('disabled')) {
+            return;
+        }
+
+        if (!$(target).is('a')){
+            target = target.parent('a');
+        }
+
+        var label = target.html();
+        var ffLabels = this.fastForwardHandleLabels;
+
+        var collection = this.collection;
+
+        if (ffLabels) {
+            switch (label) {
+                case ffLabels.first:
+                    collection.getFirstPage();
+                    return;
+                case ffLabels.prev:
+                    if (collection.hasPrevious()) {
+                        collection.getPreviousPage();
+                    }
+                    return;
+                case ffLabels.next:
+                    if (collection.hasNext()) {
+                        collection.getNextPage();
+                    }
+                    return;
+                case ffLabels.last:
+                    collection.getLastPage();
+                    return;
+            }
+        }
+
+        var state = collection.state;
+        var pageIndex = $(e.target).text() * 1;
+        collection.getPage(state.firstPage === 0 ? pageIndex - 1 : pageIndex);
+    },
+
+    preventLinkClick: function (e) {
+        e.preventDefault();
+    }
 });