Improved Paginator

pull/3113/head
Mark McDowall 11 years ago
parent d71765be53
commit 13fab38702

@ -1,6 +1,5 @@
<ul>
{{#each this}}
<li>{{this}}</li>
{{debug}}
{{/each}}
</ul>

@ -7,12 +7,20 @@
border-top : none;
.box-sizing(border-box);
.border-radius(0 0 4px 4px);
position: relative;
.total-records {
display : inline-block;
height : 30px;
padding : 0;
line-height: 30px;
font-size : 13px;
position : absolute;
right : 0;
}
ul {
display : inline-block;
*display : inline;
margin : 5px 0;
*zoom : 1;
li {
display : inline;
@ -31,10 +39,12 @@
}
}
.active {
i, span {
span {
background-color : #f5f5f5;
color : #999999;
cursor : default;
width : inherit;
padding : 0px 2px;
}
}

@ -12,4 +12,8 @@ define(
return FormatHelpers.pad(input, 2);
});
Handlebars.registerHelper('Number', function (input) {
return FormatHelpers.Number(input);
});
});

@ -33,6 +33,14 @@ define(
z = z || '0';
n = n + '';
return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
},
Number: function (input) {
if (!input) {
return '';
}
return input.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
}
});

@ -30,6 +30,8 @@ define(
return;
}
target.closest('li i').addClass('icon-spinner icon-spin');
var label = target.attr('data-action');
var ffLabels = this.fastForwardHandleLabels;
@ -81,10 +83,11 @@ define(
if (collection.mode !== 'infinite') {
for (var i = windowStart; i < windowEnd; i++) {
handles.push({
label : i + 1,
title : 'No. ' + (i + 1),
className : currentPage === i ? 'active' :undefined,
pageNumber: i + 1
label : i + 1,
title : 'No. ' + (i + 1),
className : currentPage === i ? 'active' :undefined,
pageNumber : i + 1,
lastPage : lastPage + 1
});
}
}
@ -134,7 +137,8 @@ define(
var templateFunction = Marionette.TemplateCache.get(this.template);
this.$el.html(templateFunction({
handles: this.makeHandles()
handles: this.makeHandles(),
state: this.collection.state
}));
this.delegateEvents();

@ -1,11 +1,15 @@
<ul>
{{#each handles}}
<li {{#if className}}class="{{className}}"{{/if}}>
<li {{#if className}}class="{{className}}"{{/if}} >
{{#if pageNumber}}
<span>{{label}}</span>
<span>{{pageNumber}} / {{lastPage}}</span>
{{else}}
<i class="pager-btn clickable {{label}}" data-action="{{action}}"/>
{{/if}}
</li>
{{/each}}
</ul>
<span class="total-records">
Total Records: {{Number state.totalRecords}}
</span>
Loading…
Cancel
Save