Skip to content

GitLab

Commit c145d08e authored by Olga Brani's avatar Olga Brani Committed by Kostas Papadimitriou
Browse files

astakos: Table manipulation using DataTables.js 

Pagination, filtering and sorting of tables in projects-list
and members-list view is done client-side using DataTables.js
parent 4213a1f6
Expand all Hide whitespace changes
Inline Side-by-side
snf-astakos-app/astakos/im/static/im/css/modules.css
View file @ c145d08e
......@@ -198,6 +198,8 @@ a.button { border:0 none; color: #FFFFFF; display: inline-block; te
a.button:hover { background-color: #F89A1C; border:0 none; color:#fff;}*/
/*pagination*/
.dataTables_wrapper { margin-bottom: 1em}
.dataTables_wrapper th:hover { cursor: pointer}
.dataTables_info { float:left;}
.dataTables_paginate { float:right; }
.dataTables_paginate a:after { content: ' >';}
......@@ -212,14 +214,13 @@ a.button:hover { background-color: #F89A1C; border:0 none; color:#fff;}
.dataTables_paginate .paginate_disabled_previous,
.dataTables_paginate .paginate_disabled_next,
.dataTables_paginate .paginate_disabled_next:hover { color: gray; text-decoration: none}
.dataTables_length { display: none;}
.dataTables_filter { position: absolute; right: 70px;}
.dataTables_filter { position: absolute; right: 0;}
.dataTables_filter input { border: 1px solid #9e9e9e; height: 21px; line-height: 21px; padding: 3px 10px;}
.dataTables_paginate .nums { text-align:left;}
.dataTables_paginate .nums span { color:#000;}
.dataTables_paginate .next-prev a.disabled { text-decoration: none; color:#ccc; cursor:default; }
.two-cols .lt .clients-wrapper p { padding:0; }
#members-table_wrapper .dataTables_filter { position: relative; text-align: right}
/* colors for links */
.container ul.options li a { display:inline-block; line-height:100%; }
......@@ -256,10 +257,8 @@ table.alt-style tr td a { margin:0; }
table.alt-style tr td:first-child a { margin:0; }
table.alt-style tr th a { padding-right:20px; }
table.alt-style tr th:focus { outline: 0 none;}
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.sorting_asc span { padding-right:20px;background:url(../images/arrow_th_bg.png) no-repeat right -46px; }
table.alt-style tr th.sorting_desc span { padding-right:20px;background:url(../images/arrow_th_bg.png) no-repeat right 6px;}
table.alt-style tr th.sorting_desc span { padding-right:20px;background:url(../images/arrow_th_bg.png) no-repeat right 6px;}
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 }
......@@ -685,13 +684,11 @@ table.cols-3 tr.images td { text-align: center;}
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;}
.members-table + .pagination { display: none}
.all .members-table .check { display:none;}
.form-actions { position: relative;}
.form-actions input[type="submit"] { display: none; position: }
......
snf-astakos-app/astakos/im/static/im/js/common.js
View file @ c145d08e
......@@ -84,7 +84,48 @@ if (navigator.userAgent.match(/iPhone/i)) {
}
//end of fix
function tableSort(tableEl, iDisplayLength, bFilter) {
// bFilter is an optional parameter
// if bFilter is provided, search input will be visible
bFilter = typeof bFilter !== 'undefined' ? bFilter : true;
// iDisplayLength is an optional parameter
// iDisplayLength controls the max number of rows visible to each page
iDisplayLength = typeof iDisplayLength !== 'undefined' ? iDisplayLength : 10;
// return if table holds no data
if (tableEl.find('tbody').find('tr').length <2 ){
return;
}
var dateArr = [];
var numHTMLArr = [];
_.each(tableEl.find('th'),function(value, key, list){
if ( $(value).attr('class').indexOf("date")> -1 ) {
dateArr.push(key);
}
if ( $(value).attr('class').indexOf("members_count")> -1) {
numHTMLArr.push(key);
};
});
// control pagination & table sorting for projects intro page
tableEl.dataTable({
"bFilter": bFilter,
"iDisplayLength": iDisplayLength,
"bLengthChange": false,
"aoColumnDefs": [
{ "sType": "num-html", "aTargets": numHTMLArr },
{ "sType": "date-uk", "aTargets": dateArr },
]
});
$('.dataTables_wrapper').addClass('clearfix');
}
$(document).ready(function() {
var is_firefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
......@@ -444,16 +485,9 @@ $('#members-table tr .check input').click(function(e){
$('.renew-token a.do').show();
})
// control pagination for projects intro page
$('.search-projects').parents('.projects').find('table#projects-list').dataTable({
"iDisplayLength": 20,
});
$('.search-projects').parents('.projects').find('#projects-list_filter').hide();
// control pagination for projects intro page
$('.projects-intro').parents('.projects').siblings('table#projects-list').dataTable({
"iDisplayLength": 10,
});
tableSort($('.projects-intro').siblings('table#projects-list'), 10, true );
tableSort($('.search-projects').siblings('table#projects-list'), 20, false);
tableSort($('#members-table'), 10, true);
});
......@@ -461,6 +495,5 @@ $('#members-table tr .check input').click(function(e){
$(window).resize(function() {
setContainerMinHeight('.container .wrapper');
});
snf-astakos-app/astakos/im/static/im/js/dataTables.date.js 0 → 100644
View file @ c145d08e
jQuery.extend( jQuery.fn.dataTableExt.oSort, {
"date-uk-pre": function ( a ) {
var ukDatea = a.split('/');
return (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
},
"date-uk-asc": function ( a, b ) {
return ((a < b) ? -1 : ((a > b) ? 1 : 0));
},
"date-uk-desc": function ( a, b ) {
return ((a < b) ? 1 : ((a > b) ? -1 : 0));
}
} );
\ No newline at end of file
snf-astakos-app/astakos/im/static/im/js/dataTables.numbersHTML.js 0 → 100644
View file @ c145d08e
jQuery.extend( jQuery.fn.dataTableExt.oSort, {
"num-html-pre": function ( a ) {
var x = String(a).replace( /<[\s\S]*?>/g, "" );
return parseFloat( x );
},
"num-html-asc": function ( a, b ) {
return ((a < b) ? -1 : ((a > b) ? 1 : 0));
},
"num-html-desc": function ( a, b ) {
return ((a < b) ? 1 : ((a > b) ? -1 : 0));
}
} );
\ No newline at end of file
snf-astakos-app/astakos/im/static/im/js/jquery.tablesorter.pager.js deleted 100644 → 0
View file @ 4213a1f6
(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/tables.py
View file @ c145d08e
......@@ -354,8 +354,10 @@ class ProjectMembersTable(UserTable):
input = "<input type='checkbox' name='all-none'/>"
check = tables.Column(accessor="person.id", verbose_name=mark_safe(input),
orderable=False)
email = tables.Column(accessor="person.email", verbose_name=_('Email'))
status = tables.Column(accessor="state", verbose_name=_('Status'))
email = tables.Column(accessor="person.email", verbose_name=_('Email'),
orderable= False)
status = tables.Column(accessor="state", verbose_name=_('Status'),
orderable= False)
project_action = RichLinkColumn(verbose_name=_('Action'),
extra_context=member_action_extra_context,
orderable=False)
......
snf-astakos-app/astakos/im/templates/im/base.html
View file @ c145d08e
......@@ -55,9 +55,9 @@
<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/jquery.tablesorter.js"></script>
<script src="{{ IM_STATIC_URL }}js/jquery.tablesorter.pager.js"></script>
<script src="{{ IM_STATIC_URL }}js/jquery.dataTables.js"></script>
<script src="{{ IM_STATIC_URL }}js/dataTables.date.js"></script>
<script src="{{ IM_STATIC_URL }}js/dataTables.numbersHTML.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 @ c145d08e
......@@ -11,11 +11,10 @@
{% include "im/projects/search_form.html" %}
{% else %}
{% include "im/projects/intro.html" %}
</div>
{% endif %}
{% if table %}
{% render_table table %}
{% endif %}
</div>
</div>
</div>
{% endblock %}
snf-astakos-app/astakos/im/templates/im/projects/project_members.html
View file @ c145d08e
......@@ -25,7 +25,7 @@
{% if members_table %}
{% render_table members_table %}
<div class="form-actions inactive">
<div class="form-actions inactive clearfix">
{% confirm_link "Reject selected" "Reject selected members ?" "project_members_reject" chain_id "" "OK" 1 "reject members-batch-action" %}
{% confirm_link "Accept selected" "Accept selected members ?" "project_members_accept" chain_id "" "OK" 1 "accept members-batch-action" %}
{% confirm_link "Remove selected" "Remove selected members ?" "project_members_remove" chain_id "" "OK" 1 "remove members-batch-action" %}
......
snf-astakos-app/astakos/im/views/projects.py
View file @ c145d08e
......@@ -358,9 +358,6 @@ def common_detail(request, chain_or_app_id, project_view=True,
members,
user=request.user,
prefix="members_")
RequestConfig(request, paginate={"per_page": settings.PAGINATE_BY}
).configure(members_table)
else:
members_table = None
......
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