added pagination to client display, closes #439
Justin Richer
parent
5c861c418d
commit
17b4f12103
|
|
@ -21,8 +21,8 @@
|
|||
<script type="text/javascript" src="resources/js/lib/purl.js"></script>
|
||||
<script type="text/javascript" src="resources/js/lib/bootstrapx-clickover.js"></script>
|
||||
<script type="text/javascript" src="resources/js/lib/moment.js"></script>
|
||||
<script type="text/javascript" src="resources/js/lib/retina.js"></script>
|
||||
<script type="text/javascript" src="resources/js/lib/bootstrap-sheet.js"></script>
|
||||
<script type="text/javascript" src="resources/js/lib/bootpag.js"></script>
|
||||
<c:if test="${js != null && js != ''}">
|
||||
<script type="text/javascript" src="resources/js/client.js"></script>
|
||||
<script type="text/javascript" src="resources/js/grant.js"></script>
|
||||
|
|
@ -32,5 +32,6 @@
|
|||
<script type="text/javascript" src="resources/js/token.js"></script>
|
||||
<script type="text/javascript" src="resources/js/admin.js"></script>
|
||||
</c:if>
|
||||
<script type="text/javascript" src="resources/js/lib/retina.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -303,7 +303,8 @@ var ClientListView = Backbone.View.extend({
|
|||
"click .new-client":"newClient",
|
||||
"click .refresh-table":"refreshTable",
|
||||
'keyup .search-query':'searchTable',
|
||||
'click .form-search button':'clearSearch'
|
||||
'click .form-search button':'clearSearch',
|
||||
'page #paginator':'changePage'
|
||||
},
|
||||
|
||||
newClient:function (e) {
|
||||
|
|
@ -324,17 +325,35 @@ var ClientListView = Backbone.View.extend({
|
|||
|
||||
renderInner:function(eventName) {
|
||||
|
||||
_.each(this.filteredModel.models, function (client) {
|
||||
$("#client-table",this.el).append(
|
||||
new ClientView({
|
||||
// set up pagination
|
||||
var numPages = Math.ceil(this.filteredModel.length / 10);
|
||||
if (numPages > 1) {
|
||||
$('#paginator').show();
|
||||
$('#paginator', this.el).bootpag({
|
||||
total: numPages,
|
||||
page: 1
|
||||
});
|
||||
} else {
|
||||
$('#paginator', this.el).hide();
|
||||
}
|
||||
|
||||
// render the rows
|
||||
_.each(this.filteredModel.models, function (client, index) {
|
||||
var element = new ClientView({
|
||||
model:client,
|
||||
count:this.options.stats.get(client.get('id')),
|
||||
systemScopeList: this.options.systemScopeList,
|
||||
whiteList: this.options.whiteListList.getByClientId(client.get('clientId'))
|
||||
}).render().el);
|
||||
}).render().el;
|
||||
$("#client-table",this.el).append(element);
|
||||
if (Math.ceil((index + 1) / 10) != 1) {
|
||||
$(element).hide();
|
||||
}
|
||||
}, this);
|
||||
|
||||
this.togglePlaceholder();
|
||||
|
||||
|
||||
},
|
||||
|
||||
togglePlaceholder:function() {
|
||||
|
|
@ -357,6 +376,18 @@ var ClientListView = Backbone.View.extend({
|
|||
}
|
||||
},
|
||||
|
||||
changePage:function(event, num) {
|
||||
this.page = num;
|
||||
$('#client-table tbody tr', this.el).each(function(index, element) {
|
||||
console.log([num, index]);
|
||||
if (Math.ceil((index + 1) / 10) != num) {
|
||||
$(element).hide();
|
||||
} else {
|
||||
$(element).show();
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
refreshTable:function(e) {
|
||||
e.preventDefault();
|
||||
$('#loadingbox').sheet('show');
|
||||
|
|
|
|||
|
|
@ -0,0 +1,128 @@
|
|||
/**
|
||||
* @preserve
|
||||
* bootpag - jQuery plugin for dynamic pagination
|
||||
*
|
||||
* Copyright (c) 2013 botmonster@7items.com
|
||||
*
|
||||
* Licensed under the MIT license:
|
||||
* http://www.opensource.org/licenses/mit-license.php
|
||||
*
|
||||
* Project home:
|
||||
* http://botmonster.com/jquery-bootpag/
|
||||
*
|
||||
* Version: 1.0.5
|
||||
*
|
||||
*/
|
||||
(function($, window) {
|
||||
|
||||
$.fn.bootpag = function(options){
|
||||
|
||||
var $owner = this,
|
||||
settings = $.extend({
|
||||
total: 0,
|
||||
page: 1,
|
||||
maxVisible: null,
|
||||
leaps: true,
|
||||
href: 'javascript:void(0);',
|
||||
hrefVariable: '{{number}}',
|
||||
next: '»',
|
||||
prev: '«'
|
||||
},
|
||||
$owner.data('settings') || {},
|
||||
options || {});
|
||||
|
||||
if(settings.total <= 0)
|
||||
return this;
|
||||
|
||||
if(!$.isNumeric(settings.maxVisible) && !settings.maxVisible){
|
||||
settings.maxVisible = settings.total;
|
||||
}
|
||||
|
||||
$owner.data('settings', settings);
|
||||
|
||||
function renderPage($bootpag, page){
|
||||
|
||||
var lp,
|
||||
maxV = settings.maxVisible == 0 ? 1 : settings.maxVisible,
|
||||
step = settings.maxVisible == 1 ? 0 : 1,
|
||||
vis = Math.floor((page - 1) / maxV) * maxV,
|
||||
$page = $bootpag.find('li');
|
||||
settings.page = page = page < 0 ? 0 : page > settings.total ? settings.total : page;
|
||||
$page.removeClass('disabled');
|
||||
lp = page - 1 < 1 ? 1 :
|
||||
settings.leaps && page - 1 >= settings.maxVisible ?
|
||||
Math.floor((page - 1) / maxV) * maxV : page - 1;
|
||||
$page
|
||||
.first()
|
||||
.toggleClass('disabled', page === 1)
|
||||
.attr('data-lp', lp)
|
||||
.find('a').attr('href', href(lp));
|
||||
|
||||
var step = settings.maxVisible == 1 ? 0 : 1;
|
||||
|
||||
lp = page + 1 > settings.total ? settings.total :
|
||||
settings.leaps && page + 1 < settings.total - settings.maxVisible ?
|
||||
vis + settings.maxVisible + step: page + 1;
|
||||
|
||||
$page
|
||||
.last()
|
||||
.toggleClass('disabled', page === settings.total)
|
||||
.attr('data-lp', lp)
|
||||
.find('a').attr('href', href(lp));;
|
||||
|
||||
var $currPage = $page.filter('[data-lp='+page+']');
|
||||
if(!$currPage.not('.next,.prev').length){
|
||||
var d = page <= vis ? -settings.maxVisible : 0;
|
||||
$page.not('.next,.prev').each(function(index){
|
||||
lp = index + 1 + vis + d;
|
||||
$(this)
|
||||
.attr('data-lp', lp)
|
||||
.toggle(lp <= settings.total)
|
||||
.find('a').html(lp).attr('href', href(lp));
|
||||
});
|
||||
$currPage = $page.filter('[data-lp='+page+']');
|
||||
}
|
||||
$currPage.addClass('disabled');
|
||||
$owner.data('settings', settings);
|
||||
}
|
||||
|
||||
function href(c){
|
||||
|
||||
return settings.href.replace(settings.hrefVariable, c);
|
||||
}
|
||||
|
||||
return this.each(function(){
|
||||
|
||||
var $bootpag, lp, me = $(this),
|
||||
p = ['<ul class="pagination bootpag">'];
|
||||
|
||||
if(settings.prev){
|
||||
p.push('<li data-lp="1" class="prev"><a href="'+href(1)+'">'+settings.prev+'</a></li>');
|
||||
}
|
||||
for(var c = 1; c <= Math.min(settings.total, settings.maxVisible); c++){
|
||||
p.push('<li data-lp="'+c+'"><a href="'+href(c)+'">'+c+'</a></li>');
|
||||
}
|
||||
if(settings.next){
|
||||
lp = settings.leaps && settings.total > settings.maxVisible
|
||||
? Math.min(settings.maxVisible + 1, settings.total) : 2;
|
||||
p.push('<li data-lp="'+lp+'" class="next"><a href="'+href(lp)+'">'+settings.next+'</a></li>');
|
||||
}
|
||||
p.push('</ul>');
|
||||
me.find('ul.bootpag').remove();
|
||||
me.append(p.join(''));
|
||||
$bootpag = me.find('ul.bootpag');
|
||||
me.find('li').click(function paginationClick(){
|
||||
|
||||
var me = $(this);
|
||||
if(me.hasClass('disabled')){
|
||||
return;
|
||||
}
|
||||
var page = parseInt(me.attr('data-lp'), 10);
|
||||
renderPage($bootpag, page);
|
||||
$owner.trigger('page', page);
|
||||
});
|
||||
renderPage($bootpag, settings.page);
|
||||
});
|
||||
}
|
||||
|
||||
})(jQuery, window);
|
||||
|
|
@ -114,6 +114,8 @@
|
|||
</tbody>
|
||||
</table>
|
||||
|
||||
<div id="paginator" class="pagination"> </div>
|
||||
|
||||
<div class="well well-small">
|
||||
<button class="btn btn-small refresh-table"><i class="icon-refresh"></i> Refresh</button>
|
||||
<button class="btn btn-small btn-primary new-client"><i class="icon-plus icon-white"></i> New Client</button>
|
||||
|
|
@ -708,4 +710,3 @@
|
|||
<% } %>
|
||||
|
||||
</script>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue