Paginate export results on the client.

problem_builder/public/css/student_answers_dashboard.css

@@ -41,6 +41,7 @@
     display: none;
 }
 .data-export-results table {
+    width: 100%;
     margin-top: 1em;
 }
 .data-export-results thead {

problem_builder/public/js/student_answers_dashboard.js

@@ -100,22 +100,17 @@ function StudentAnswersDashboardBlock(runtime, element) {
                         }
                     )
                 ));
+
                 // Display results
-                var $resultTableBody = $resultTable.find('tbody');
-                $resultTableBody.empty();
-                _.each(status.last_export_result.display_data, function(row, index) {
-                    var tr = $('<tr>');
-                    if (index % 2 === 0) {
-                        tr.addClass('even');
-                    }
-                    _.each(row, function(cell) {
-                        tr.append($('<td>').text(cell));
-                    });
-                    $resultTableBody.append(tr);
+                var results = _.map(status.last_export_result.display_data, function(row) {
+                    return new Result(null, { values: row });
                 });
+
+                resultsView.collection.fullCollection.reset(results);
+                resultsView.render();
+
                 showResults();
             }
-
         } else {
             if (status.export_pending) {
                 $statusArea.append($('<p>').text(
@@ -165,4 +160,128 @@ function StudentAnswersDashboardBlock(runtime, element) {
 
     showSpinner();
     getStatus();
+
+    // Pagination
+
+    var Result = Backbone.Model.extend({
+
+        initialize: function(attrs, options) {
+            _.each(_.zip(Result.properties, options.values), function(pair) {
+                this.set(pair[0], pair[1]);
+            }, this);
+        }
+
+    }, { properties: ['section', 'subsection', 'unit', 'type', 'question', 'answer', 'username'] });
+
+    var Results = Backbone.PageableCollection.extend({
+
+        model: Result,
+
+        getCurrentPage: function() {
+            var currentPage = this.state.currentPage;
+            return this.getPage(currentPage);
+        }
+
+    });
+
+    var ResultsView = Backbone.View.extend({
+
+        render: function() {
+            this._insertRecords(this.collection.getCurrentPage());
+            this._updateControls();
+            this.$('#total-pages').text(this.collection.state.totalPages);
+            return this;
+        },
+
+        _insertRecords: function(records) {
+            var tbody = this.$('tbody');
+            tbody.empty();
+            records.each(function(result, index) {
+                var row = $('<tr>');
+                if (index % 2 === 0) {
+                    row.addClass('even');
+                }
+                _.each(Result.properties, function(name) {
+                    row.append($('<td>').text(result.get(name)));
+                });
+                tbody.append(row);
+            }, this);
+            this.$('#current-page').text(this.collection.state.currentPage);
+        },
+
+        events: {
+            'click #first-page': '_firstPage',
+            'click #prev-page': '_prevPage',
+            'click #next-page': '_nextPage',
+            'click #last-page': '_lastPage'
+        },
+
+        _firstPage: function() {
+            this._insertRecords(this.collection.getFirstPage());
+            this._updateControls();
+        },
+
+        _prevPage: function() {
+            if (this.collection.hasPreviousPage()) {
+                this._insertRecords(this.collection.getPreviousPage());
+            }
+            this._updateControls();
+        },
+
+        _nextPage: function() {
+            if (this.collection.hasNextPage()) {
+                this._insertRecords(this.collection.getNextPage());
+            }
+            this._updateControls();
+        },
+
+        _lastPage: function() {
+            this._insertRecords(this.collection.getLastPage());
+            this._updateControls();
+        },
+
+        _updateControls: function() {
+            var currentPage = this.collection.state.currentPage,
+                totalPages = this.collection.state.totalPages,
+                firstPage = '#first-page',
+                prevPage = '#prev-page',
+                nextPage = '#next-page',
+                lastPage = '#last-page',
+                all = [firstPage, prevPage, nextPage, lastPage],
+                backward = [firstPage, prevPage],
+                forward = [nextPage, lastPage];
+            if (totalPages === 1) {
+                this._disable(all);
+            } else {
+                if (currentPage === 1) {
+                    this._disable(backward);
+                    this._enable(forward);
+                } else if (currentPage === totalPages) {
+                    this._enable(backward);
+                    this._disable(forward);
+                } else {
+                    this._enable(all);
+                }
+            }
+        },
+
+        _enable: function(controls) {
+            _.each(controls, function(control) {
+                this.$(control).prop('disabled', false);
+            }, this);
+        },
+
+        _disable: function(controls) {
+            _.each(controls, function(control) {
+                this.$(control).prop('disabled', true);
+            }, this);
+        }
+
+    });
+
+    var resultsView = new ResultsView({
+        collection: new Results([], { mode: "client", state: { pageSize: 15 } }),
+        el: $element.find('#results')
+    });
+
 }

problem_builder/student_answers_dashboard.py

@@ -113,6 +113,7 @@ class StudentAnswersDashboardBlock(XBlock):
         fragment.add_css_url(self.runtime.local_resource_url(self, 'public/css/student_answers_dashboard.css'))
         fragment.add_javascript_url(self.runtime.local_resource_url(self, 'public/js/student_answers_dashboard.js'))
         fragment.add_javascript_url(self.runtime.local_resource_url(self, 'public/js/vendor/underscore-min.js'))
+        fragment.add_javascript_url(self.runtime.local_resource_url(self, 'public/js/vendor/backbone.paginator.min.js'))
         fragment.initialize_js('StudentAnswersDashboardBlock')
         return fragment
 

problem_builder/templates/html/student_answers_dashboard.html

@@ -51,7 +51,7 @@
   </div>
 </div>
 
-<div class="data-export-results">
+<div id="results" class="data-export-results">
   <table>
     <thead>
       <tr>
@@ -67,6 +67,13 @@
     <tbody></tbody>
   </table>
   <div class="data-export-info"></div>
+  <div class="data-export-result-actions">
+    <button id="first-page">First</button>
+    <button id="prev-page">Prev</button>
+    <span id="current-page"></span>/<span id="total-pages"></span>
+    <button id="next-page">Next</button>
+    <button id="last-page">Last</button>
+  </div>
 </div>
 
 <div class="data-export-status"></div>