Adding backgrid paginator

Gruntfile.js

@@ -21,6 +21,7 @@ module.exports = function (grunt) {
             'UI/JsLibraries/underscore.js'               : 'http://underscorejs.org/underscore.js',
             'UI/JsLibraries/backbone.pageable.js'        : 'http://raw.github.com/wyuenho/backbone-pageable/master/lib/backbone-pageable.js',
             'UI/JsLibraries/backbone.backgrid.js'        : 'http://raw.github.com/wyuenho/backgrid/master/lib/backgrid.js',
+            'UI/JsLibraries/backbone.backgrid.paginator' : 'http://raw.github.com/wyuenho/backgrid/master/lib/extensions/paginator/backgrid-paginator.js',
             'UI/JsLibraries/messenger.js'                : 'http://raw.github.com/HubSpot/messenger/master/build/js/messenger.js',
             'UI/Content/messenger.css'                   : 'http://raw.github.com/HubSpot/messenger/master/build/css/messenger.css',
             'UI/Content/bootstrap.toggle-switch.css'     : 'http://raw.github.com/ghinda/css-toggle-switch/gh-pages/toggle-switch.css',

UI/Content/backbone.backgrid.paginator.css

@@ -0,0 +1,58 @@
+/*
+  backgrid-paginator
+  http://github.com/wyuenho/backgrid
+
+  Copyright (c) 2013 Jimmy Yuen Ho Wong and contributors
+  Licensed under the MIT @license.
+*/
+
+.backgrid-paginator {
+  text-align: center;
+  -webkit-box-sizing: border-box;
+     -moz-box-sizing: border-box;
+          box-sizing: border-box;
+  border-top: none;
+  -webkit-border-radius: 0 0 4px 4px;
+     -moz-border-radius: 0 0 4px 4px;
+          border-radius: 0 0 4px 4px;
+}
+
+.backgrid-paginator ul {
+  display: inline-block;
+  *display: inline;
+  margin: 5px 0;
+  *zoom: 1;
+}
+
+.backgrid-paginator ul > li {
+  display: inline;
+}
+
+.backgrid-paginator ul > li > a,
+.backgrid-paginator ul > li > span {
+  float: left;
+  width: 30px;
+  height: 30px;
+  padding: 0;
+  line-height: 30px;
+  text-decoration: none;
+}
+
+.backgrid-paginator ul > li > a:hover,
+.backgrid-paginator ul > .active > a,
+.backgrid-paginator ul > .active > span {
+  background-color: #f5f5f5;
+}
+
+.backgrid-paginator ul > .active > a,
+.backgrid-paginator ul > .active > span {
+  color: #999999;
+  cursor: default;
+}
+
+.backgrid-paginator ul > .disabled > span,
+.backgrid-paginator ul > .disabled > a,
+.backgrid-paginator ul > .disabled > a:hover {
+  color: #999999;
+  cursor: default;
+}

UI/Index.html

@@ -16,6 +16,7 @@
     <link href="/content/theme.css" rel='stylesheet' type='text/css'>
     <link href="/content/toastr.css" rel='stylesheet' type='text/css'>
     <link href="/content/fullcalendar.css" rel='stylesheet' type='text/css'>
+    <link href="/content/backbone.backgrid.paginator.css" rel='stylesheet' type='text/css'/>
     <link href="/content/tablesorter.bootstrap.css" rel='stylesheet' type='text/css'/>
     <link href="/content/tablesorter.pager.css" rel='stylesheet' type='text/css'/>
     <link href="/content/toggle-switch.css" rel='stylesheet' type='text/css'/>
@@ -102,6 +103,7 @@
 <script src="/JsLibraries/backbone.marionette.js"></script>
 <script src="/JsLibraries/backbone.pageable.js"></script>
 <script src="/JsLibraries/backbone.backgrid.js"></script>
+<script src="/JsLibraries/backbone.backgrid.paginator.js"></script>
 <script src="/JsLibraries/jquery.tablesorter.js"></script>
 <script src="/JsLibraries/jquery.tablesorter.bootstrap.js"></script>
 <script src="/JsLibraries/jquery.tablesorter.pager.js"></script>

UI/Missing/Collection.js

@@ -1,5 +1,5 @@
 "use strict";
-define(['app'], function () {
+define(['app', 'Series/EpisodeModel'], function () {
     NzbDrone.Missing.Collection = Backbone.PageableCollection.extend({
         url       : NzbDrone.Constants.ApiRoot + '/missing',
         model     : NzbDrone.Series.EpisodeModel,

UI/Missing/MissingLayout.js

@@ -64,7 +64,12 @@ define([
                         row       : NzbDrone.Missing.Row,
                         columns   : columns,
                         collection: this.missingCollection,
-                        className : 'table table-hover'
+                        className : 'table table-hover',
+                        state: {
+                            pageSize: 10,
+                            sortKey: "airDate",
+                            order: 1
+                        }
                     }));
             },