New: Jump to page on tables (click on page number)

pull/6/head
Mark McDowall 11 years ago
parent 2d028d9bc7
commit 11bc946797

@ -1,3 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="UTF-8"?>
<project version="4" /> <project version="4">
<component name="JavaScriptLibraryMappings">
<excludedPredefinedLibrary name="HTML" />
<excludedPredefinedLibrary name="HTML5 / EcmaScript 5" />
</component>
</project>

@ -8,16 +8,16 @@
<option es3="false" /> <option es3="false" />
<option forin="true" /> <option forin="true" />
<option immed="true" /> <option immed="true" />
<option latedef="true" />
<option newcap="true" /> <option newcap="true" />
<option noarg="true" /> <option noarg="true" />
<option noempty="false" /> <option noempty="false" />
<option nonew="true" /> <option nonew="true" />
<option plusplus="false" /> <option plusplus="false" />
<option undef="true" /> <option undef="true" />
<option unused="true" />
<option strict="true" /> <option strict="true" />
<option trailing="false" /> <option trailing="false" />
<option latedef="true" />
<option unused="true" />
<option quotmark="single" /> <option quotmark="single" />
<option maxdepth="3" /> <option maxdepth="3" />
<option asi="false" /> <option asi="false" />

@ -34,6 +34,10 @@
text-decoration : none; text-decoration : none;
} }
select {
width: auto;
}
.pager-btn { .pager-btn {
.clickable; .clickable;
} }

@ -0,0 +1,25 @@
'use strict';
define(
[
'handlebars'
], function (Handlebars) {
Handlebars.registerHelper('times', function(n, block) {
var accum = '';
for(var i = 0; i < n; ++i) {
accum += block.fn(i);
}
return accum;
});
Handlebars.registerHelper('for', function(from, to, incr, block) {
var accum = '';
for(var i = from; i < to; i += incr) {
accum += block.fn(i);
}
return accum;
});
});

@ -11,6 +11,7 @@ define(
'Handlebars/Helpers/Quality', 'Handlebars/Helpers/Quality',
'Handlebars/Helpers/System', 'Handlebars/Helpers/System',
'Handlebars/Helpers/EachReverse', 'Handlebars/Helpers/EachReverse',
'Handlebars/Helpers/EachReverse',
'Handlebars/Handlebars.Debug' 'Handlebars/Handlebars.Debug'
], function (Templates) { ], function (Templates) {
return function () { return function () {

@ -0,0 +1,9 @@
<select>
{{#each pages}}
{{#if current}}
<option value="{{page}}" selected="selected">{{page}}</option>
{{else}}
<option value="{{page}}">{{page}}</option>
{{/if}}
{{/each}}
</select>

@ -1,16 +1,20 @@
'use strict'; 'use strict';
define( define(
[ [
'jquery',
'marionette', 'marionette',
'backgrid.paginator' 'backgrid.paginator'
], function (Marionette, Paginator) { ], function ($, Marionette, Paginator) {
return Paginator.extend({ return Paginator.extend({
template: 'Shared/Grid/PagerTemplate', template: 'Shared/Grid/PagerTemplate',
events: { events: {
'click .pager-btn': 'changePage' 'click .pager-btn' : 'changePage',
'click .x-page-number' : '_showPageJumper',
'change .x-page-number select' : '_jumpToPage',
'blur .x-page-number select' : 'render'
}, },
windowSize: 1, windowSize: 1,
@ -25,7 +29,7 @@ define(
changePage: function (e) { changePage: function (e) {
e.preventDefault(); e.preventDefault();
var target =this.$(e.target); var target = this.$(e.target);
if (target.closest('li').hasClass('disabled')) { if (target.closest('li').hasClass('disabled')) {
return; return;
@ -77,7 +81,7 @@ define(
var lastPage = +state.lastPage; var lastPage = +state.lastPage;
lastPage = Math.max(0, firstPage ? lastPage - 1 :lastPage); lastPage = Math.max(0, firstPage ? lastPage - 1 :lastPage);
var currentPage = Math.max(state.currentPage, state.firstPage); var currentPage = Math.max(state.currentPage, state.firstPage);
currentPage = firstPage ? currentPage - 1 :currentPage; currentPage = firstPage ? currentPage - 1 : currentPage;
var windowStart = Math.floor(currentPage / this.windowSize) * this.windowSize; var windowStart = Math.floor(currentPage / this.windowSize) * this.windowSize;
var windowEnd = Math.min(lastPage + 1, windowStart + this.windowSize); var windowEnd = Math.min(lastPage + 1, windowStart + this.windowSize);
@ -145,6 +149,42 @@ define(
this.delegateEvents(); this.delegateEvents();
return this; return this;
},
_showPageJumper: function (e) {
if ($(e.target).is('select')) {
return;
}
var templateFunction = Marionette.TemplateCache.get('Shared/Grid/JumpToPageTemplate');
var state = this.collection.state;
var currentPage = Math.max(state.currentPage, state.firstPage);
currentPage = state.firstPage ? currentPage - 1 : currentPage;
var pages = [];
for (var i = 0; i < this.collection.state.lastPage; i++) {
if (i === currentPage) {
pages.push({ page: i + 1, current: true });
}
else {
pages.push({ page: i + 1 });
}
}
this.$el.find('.x-page-number').html(templateFunction({
pages : pages
}));
this.$el.find('.x-page-number select').trigger('click');
},
_jumpToPage: function () {
var selectedPage = parseInt(this.$el.find('.x-page-number select').val(), 10);
this.$el.find('.x-page-number').html('<i class="icon-spinner icon-spin"></i>');
this.collection.getPage(selectedPage);
} }
}); });
}); });

@ -2,7 +2,7 @@
{{#each handles}} {{#each handles}}
<li {{#if className}}class="{{className}}"{{/if}} > <li {{#if className}}class="{{className}}"{{/if}} >
{{#if pageNumber}} {{#if pageNumber}}
<span>{{pageNumber}} / {{lastPage}}</span> <span class="x-page-number">{{pageNumber}} / {{lastPage}}</span>
{{else}} {{else}}
<i class="pager-btn clickable {{label}}" data-action="{{action}}"/> <i class="pager-btn clickable {{label}}" data-action="{{action}}"/>
{{/if}} {{/if}}

Loading…
Cancel
Save