Skip to content

GitLab

Commit ee95928a authored by Olga Brani's avatar Olga Brani Committed by Giorgos Korfiatis
Browse files

astakos: project table client-side sorting 

Client-side sorting and pagination for project-list tables
parent 7c5e54d2
Expand all Hide whitespace changes
Inline Side-by-side
snf-astakos-app/astakos/im/static/im/css/modules.css
View file @ ee95928a
......@@ -243,6 +243,9 @@ table.alt-style tr td:first-child a { margin:0; }
table.alt-style tr th a { padding-right:20px; }
table.alt-style tr th.asc a { background:url(../images/arrow_th_bg.png) no-repeat right -48px; }
table.alt-style tr th.desc a { background:url(../images/arrow_th_bg.png) no-repeat right 6px; }
table.alt-style tr th.headerSortDown { padding-right:20px;background:url(../images/arrow_th_bg.png) no-repeat 70% -42px; }
table.alt-style tr th.headerSortUp { padding-right:20px;background:url(../images/arrow_th_bg.png) no-repeat 70% 10px; }
table.my-projects tr th:hover { cursor: pointer; text-decoration: underline;}
.content a.submit { margin:0; display:inline-block; margin:10px 0 ; height:auto; min-width:100px; text-align:center;}
table.alt-style tr:nth-child(2n) td { background:#F2F2F2 }
dl.alt-style dt { width:30%; float:left; color:#3582AC; font-weight:normal;}
......@@ -666,6 +669,7 @@ table.cols-3 tr.links td { font-size:1.154em}
.members-table { width:100%;}
.members-table .check { width:5%;}
.members-table .check input[type="checkbox"] { vertical-align: middle }
.members-table .check + td.email { padding-left:5px;}
.approved .members-table .email:hover,
.pending .members-table.email:hover { cursor: pointer;}
......
snf-astakos-app/astakos/im/static/im/js/common.js
View file @ ee95928a
......@@ -444,8 +444,32 @@ $('#members-table tr .check input').click(function(e){
$('.renew-token a.do').show();
})
// control pagination for projects intro page
$('.projects').siblings("#projects-list")
.tablesorter({
widthFixed: true,
sortList: [[0,0]],
})
.tablesorterPager({
container: $("#pager"),
size:10,
positionFixed:false,
});
// control pagination for find project page
$('.projects').find("#projects-list")
.tablesorter({
widthFixed: true,
sortList: [[0,0]],
})
.tablesorterPager({
container: $("#pager"),
size:20,
positionFixed:false,
});
});
$(window).resize(function() {
......
snf-astakos-app/astakos/im/static/im/js/jquery.tablesorter.pager.js 0 → 100644
View file @ ee95928a
(function($) {
$.extend({
tablesorterPager: new function() {
// this function renders upon initialization
function updatePageDisplay(c,table) {
checkDisabled(table);
/*
The following line has been added to provide page display
info on non input form elements
*/
$(c.cssPageDisplay).html((c.page+1) + c.seperator + c.totalPages);
var s = $(c.cssPageDisplay,c.container).val((c.page+1) + c.seperator + c.totalPages);
}
function setPageSize(table,size) {
var c = table.config;
c.size = size;
c.totalPages = Math.ceil(c.totalRows / c.size);
c.pagerPositionSet = false;
moveToPage(table);
fixPosition(table);
}
function fixPosition(table) {
var c = table.config;
if(!c.pagerPositionSet && c.positionFixed) {
var c = table.config, o = $(table);
if(o.offset) {
c.container.css({
top: o.offset().top + o.height() + 'px',
position: 'absolute'
});
}
c.pagerPositionSet = true;
}
}
function checkDisabled(table) {
var c = table.config;
if (c.page == (c.totalPages-1)) {
$(config.cssNext).addClass('disabled');
} else {
$(config.cssNext).removeClass('disabled');
}
if (c.page == 0) {
$(config.cssPrev).addClass('disabled');
} else {
$(config.cssPrev).removeClass('disabled');
}
}
function moveToFirstPage(table) {
var c = table.config;
c.page = 0;
moveToPage(table);
}
function moveToLastPage(table) {
var c = table.config;
c.page = (c.totalPages-1);
moveToPage(table);
}
function moveToNextPage(table) {
var c = table.config;
c.page++;
if(c.page >= (c.totalPages-1)) {
c.page = (c.totalPages-1);
}
moveToPage(table);
}
function moveToPrevPage(table) {
var c = table.config;
c.page--;
if(c.page <= 0) {
c.page = 0;
}
moveToPage(table);
}
function moveToPage(table) {
var c = table.config;
if(c.page < 0 || c.page > (c.totalPages-1)) {
c.page = 0;
}
renderTable(table,c.rowsCopy);
}
function renderTable(table,rows) {
var c = table.config;
var l = rows.length;
var s = (c.page * c.size);
var e = (s + c.size);
if(e > rows.length ) {
e = rows.length;
}
var tableBody = $(table.tBodies[0]);
// clear the table body
$.tablesorter.clearTableBody(table);
for(var i = s; i < e; i++) {
//tableBody.append(rows[i]);
var o = rows[i];
var l = o.length;
for(var j=0; j < l; j++) {
tableBody[0].appendChild(o[j]);
}
}
fixPosition(table,tableBody);
$(table).trigger("applyWidgets");
if( c.page >= c.totalPages ) {
moveToLastPage(table);
}
updatePageDisplay(c,table);
}
this.appender = function(table,rows) {
var c = table.config;
c.rowsCopy = rows;
c.totalRows = rows.length;
c.totalPages = Math.ceil(c.totalRows / c.size);
renderTable(table,rows);
};
this.defaults = {
size: 10,
offset: 0,
page: 0,
totalRows: 0,
totalPages: 0,
container: null,
cssNext: '.next',
cssPrev: '.prev',
cssFirst: '.first',
cssLast: '.last',
cssPageDisplay: '.pagedisplay',
cssPageSize: '.pagesize',
seperator: "/",
positionFixed: true,
appender: this.appender
};
this.construct = function(settings) {
return this.each(function() {
config = $.extend(this.config, $.tablesorterPager.defaults, settings);
var table = this, pager = config.container;
$(this).trigger("appendCache");
/*
If uncommented the plugin does not function properly
when page size select is not present on the page.
*/
//config.size = parseInt($(".pagesize",pager).val());
$(config.cssFirst,pager).click(function() {
moveToFirstPage(table);
return false;
});
$(config.cssNext,pager).click(function() {
moveToNextPage(table);
return false;
});
$(config.cssPrev,pager).click(function() {
moveToPrevPage(table);
return false;
});
$(config.cssLast,pager).click(function() {
moveToLastPage(table);
return false;
});
$(config.cssPageSize,pager).change(function() {
setPageSize(table,parseInt($(this).val()));
return false;
});
});
};
}
});
// extend plugin scope
$.fn.extend({
tablesorterPager: $.tablesorterPager.construct
});
})(jQuery);
snf-astakos-app/astakos/im/templates/im/base.html
View file @ ee95928a
......@@ -52,10 +52,11 @@
<script src="{{ IM_STATIC_URL }}js/forms.js"></script>
<script src="{{ IM_STATIC_URL }}js/jquery.dropkick-1.0.0.js"></script>
<script src="{{ IM_STATIC_URL }}js/jquery-ui-1.8.21.custom.min.js"></script>
<script src="{{ IM_STATIC_URL }}js/jquery.tablesorter.js"></script>
<script src="{{ IM_STATIC_URL }}js/jquery.cookie.js"></script>
<script src="{{ IM_STATIC_URL }}js/mustache.js"></script>
<script src="{{ IM_STATIC_URL }}js/retina.js"></script>
<script src="{{ IM_STATIC_URL }}js/retina.js"></script>
<script src="{{ IM_STATIC_URL }}js/jquery.tablesorter.js"></script>
<script src="{{ IM_STATIC_URL }}js/jquery.tablesorter.pager.js"></script>
<script src="{{ IM_STATIC_URL }}js/common.js"></script>
{% endblock headjs %}
{% block endhead %}{% endblock endhead %}
......
snf-astakos-app/astakos/im/templates/im/projects/project_list.html
View file @ ee95928a
......@@ -14,7 +14,16 @@
</div>
{% endif %}
{% if table %}
{% render_table table %}
<div class="pagination clearfix" id="pager">
<p class="next-prev">
<a href="" class="prev">&lt; Previous</a>
<a href="" class="next">Next &gt;</a>
</p>
<span class="pagedisplay">1/1</span>
</div>
{% endif %}
</div>
</div>
......
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