Commit 3a604418 authored by alexandre's avatar alexandre

Added pagination on the list of scores

parent 8a4a7ee6
......@@ -6,10 +6,19 @@ window.W = window.W || {};
(function(undefined) {
'use strict';
W.ScoreCollection = Backbone.Collection.extend({
W.ScoreCollection = Backbone.PageableCollection.extend({
url: '/api/scores/',
model: W.ScoreModel
model: W.ScoreModel,
// see <http://borodaalex.blogspot.be/2016/02/pagination-and-filtering-with.html>
parseState: function (resp, queryParams, state, options) {
return {totalRecords: resp.count};
},
parseRecords: function (resp, options) {
return resp.results;
}
});
......
......@@ -1304,6 +1304,39 @@ window.W = window.W || {};
});
W.PaginationView = Backbone.Marionette.View.extend({
template: '#pagination-template',
templateContext: function() {
return {
currentPage: this.collection.state.currentPage,
lastPage: this.collection.state.lastPage,
hasPreviousPage: this.collection.hasPreviousPage(),
hasNextPage: this.collection.hasNextPage()
}
},
triggers: {
'click .next-page': 'nextPage',
'click .previous-page': 'previousPage',
},
onNextPage: function(event) {
this.collection.getNextPage();
console.log(this.collection.state)
},
onPreviousPage: function(event) {
this.collection.getPreviousPage();
console.log(this.collection.state)
},
initialize: function (options) {
this.listenTo(this.collection, 'sync', this.render);
},
});
W.CreateView = Backbone.Marionette.View.extend({
template: '#create-template',
......@@ -1334,17 +1367,40 @@ window.W = window.W || {};
regions: {
list: '#list',
pagination : '#pagination',
create: '#create'
},
onRender: function () {
document.title = 'Notation W';
var scoreCollection = new W.ScoreCollection();
var scoreCollection = new W.ScoreCollection([], {
// All the `state` and `queryParams` key value pairs are merged with
// the defaults too.
state: {
pageSize: 25,
firstPage: 1,
currentPage: 1
},
queryParams: {
currentPage: "page",
pageSize: "page_size",
totalRecords: "count"
},
});
window.sc = scoreCollection;
var myListView = new W.ListView({
collection: scoreCollection
});
var myPaginationView = new W.PaginationView({
collection: scoreCollection
});
var myCreateView = new W.CreateView();
var that = this;
......@@ -1352,6 +1408,7 @@ window.W = window.W || {};
myListView.collection.fetch({
success: function () {
that.showChildView('list', myListView);
that.showChildView('pagination', myPaginationView);
that.showChildView('create', myCreateView);
}
});
......
This diff is collapsed.
......@@ -15,6 +15,10 @@
{% include "playground/underscore/score-list.mtpl" %}
</script>
<script id="pagination-template" type="text/template">
{% include "playground/underscore/pagination.mtpl" %}
</script>
<script id="create-template" type="text/template">
{% include "playground/underscore/create.mtpl" %}
</script>
......@@ -76,6 +80,7 @@
<script src="{% static 'playground/vendors/backbone.radio.min.js' %}"></script>
<script src="{% static 'playground/vendors/backbone.marionette.min.js' %}"></script>
<script src="{% static 'playground/vendors/backbone-relational.min.js' %}"></script>
<script src="{% static 'playground/vendors/backbone.paginator.min.js' %}"></script>
<script src="{% static 'playground/vendors/jquery-ui.min.js' %}"></script>
<script src="{% static 'playground/vendors/jquery.mjs.nestedSortable.js' %}"></script>
<script src="{% static 'playground/js/models.js' %}"></script>
......@@ -87,4 +92,4 @@
<script src="{% static 'playground/js/main.js' %}"></script>
</body>
</html>
\ No newline at end of file
</html>
<% if (hasPreviousPage) { %>
<span class="previous-page">Previous</span>
<% } %>
| page <%= currentPage %> de <%= lastPage %> |
<% if (hasNextPage) { %>
<span class="next-page">Next</span>
<% } %>
<div id="list"></div>
<div id="pagination"></div>
<div id="create"></div>
from django.views.generic.base import TemplateView
from rest_framework import viewsets
from rest_framework.pagination import PageNumberPagination
from rest_framework.parsers import FormParser, MultiPartParser
from .models import Attachment, Score
from .serializers import AttachmentSerializer, ScoreSerializer
......@@ -15,12 +16,19 @@ class AttachmentViewSet(viewsets.ModelViewSet):
serializer.save(attachment=self.request.data.get('attachment'))
class ScoreViewSetPagination(PageNumberPagination):
# page_size = 10
page_size_query_param = 'page_size'
# max_page_size = 10000
class ScoreViewSet(viewsets.ModelViewSet):
"""
API endpoint that allows users to be viewed or edited.
"""
queryset = Score.objects.all()
serializer_class = ScoreSerializer
pagination_class = ScoreViewSetPagination
class ScoreView(TemplateView):
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment