Added pagination to Missing

This commit is contained in:
Mark McDowall
2013-03-21 23:43:23 -07:00
parent 9af5dbdc05
commit f662b5de8a
8 changed files with 1891 additions and 909 deletions
@@ -10,3 +10,28 @@
</thead>
<tbody></tbody>
</table>
<div class="x-missing-table-pager">
<div class="row">
<div class="pagination span8">
<ul>
<li class="first">
<a href="#"><i class="icon-fast-backward"></i></a>
</li>
<li class="prev">
<a href="#"><i class="icon-backward"></i></a></li>
<li>
<span class="page-number">0</span>
</li>
<li class="next">
<a href="#"><i class="icon-forward"></i></a>
</li>
<li class="last">
<a href="#"><i class="icon-fast-forward"></i></a>
</li>
</ul>
</div>
<div class="pull-right pagedisplay-container">
<span class="pagedisplay"></span>
</div>
</div>
</div>
@@ -7,7 +7,8 @@ define(['app', 'Missing/MissingItemView'], function (app) {
template: 'Missing/MissingCollectionTemplate',
ui:{
table : '.x-missing-table'
table : '.x-missing-table',
pager : '.x-missing-table-pager'
},
initialize: function (context, action, query, collection) {
@@ -42,34 +43,46 @@ define(['app', 'Missing/MissingItemView'], function (app) {
}
});
//Todo: We should extract these common settings out
this.ui.table.find('th.header').each(function(){
$(this).append('<i class="icon-sort pull-right">');
this.ui.table.bind('pagerComplete pagerInitialized', function(event, c){
c.container.find('.page-number').text(c.page + 1);
});
this.ui.table.tablesorterPager({
container: this.ui.pager,
output: 'Displaying {startRow} to {endRow} of {totalRows} episodes'
});
this.applySortIcons();
this.ui.table.bind("sortEnd", function() {
$(this).find('th.header i').each(function(){
$(this).remove();
});
$(this).find('th.header').each(function () {
if (!$(this).hasClass('headerSortDown') && !$(this).hasClass('headerSortUp'))
$(this).append('<i class="icon-sort pull-right">');
});
$(this).find('th.headerSortDown').each(function(){
$(this).append('<i class="icon-sort-up pull-right">');
});
$(this).find('th.headerSortUp').each(function(){
$(this).append('<i class="icon-sort-down pull-right">');
});
this.applySortIcons();
});
}
else
{
this.ui.table.trigger('update');
}
}
},
//Todo: Remove this from each view that requires it
applySortIcons: function() {
$(this.ui.table).find('th.tablesorter-header .tablesorter-header-inner i').each(function(){
$(this).remove();
});
$(this.ui.table).find('th.tablesorter-header').each(function () {
if ($(this).hasClass('tablesorter-headerDesc'))
$(this).children('.tablesorter-header-inner').append('<i class="icon-sort-up pull-right">');
else if ($(this).hasClass('tablesorter-headerAsc'))
$(this).children('.tablesorter-header-inner').append('<i class="icon-sort-down pull-right">');
else if (!$(this).hasClass('sorter-false'))
$(this).children('.tablesorter-header-inner').append('<i class="icon-sort pull-right">');
});
},
updatePageNumber: function(event, stuff) {
}
});
});