jm2l/jm2l/templates/Participant/list.mako

# -*- coding: utf-8 -*- 
<%inherit file="jm2l:templates/layout.mako"/>

<%def name="cssAddOn()">
<style>
.data {
	display:none;
}

.table thead th {
	background-color: lightblue;
	vertical-align:middle;
	text-align:center;
}

th.SortUp {
    background: url("/static/img/up.gif") right center no-repeat;
}

th.SortDown {
    background: url("/static/img/down.gif") right center no-repeat;
}

</style>
</%def>
<script src="/vendor/jquery.min.js"></script>  
<script>

$(function () {

$('th').click(function(){
    var table = $(this).parents('table').eq(0)
    var rows = table.find("tr:not(:has('th'))").toArray().sort(comparer($(this).index(),this.asc))
    this.asc = !this.asc
    table.find('th').removeClass( "SortDown SortUp" );
    if (!this.asc){
    	rows = rows.reverse(); 
    	table.find('th:eq('+$(this).index()+')').toggleClass('SortDown');
    } else {
    	table.find('th:eq('+$(this).index()+')').toggleClass('SortUp');
    }
    for (var i = 0; i < rows.length; i++){table.append(rows[i])}
})
function comparer(index, order) {
	if (index==3 || index==7)
	    return function(a, b) {
		    var dateA = new Date(getCellValue(a, index)).getTime();
		    var dateB = new Date(getCellValue(b, index)).getTime();
			if (isNaN(dateA) && isNaN(dateB))  return 0
			if (isNaN(dateA)) return order ? -1 : 1
			if (isNaN(dateB)) return order ? 1 : -1
		    return dateA > dateB ? 1 : -1;  
	    }	
	else
	    return function(a, b) {
	        var valA = getCellValue(a, index), valB = getCellValue(b, index)
	        if (valA==="" && valB==="") return 0
	        if (valA==="") return order ? -1 : 1
	        if (valB==="") return order ? 1 : -1
	        return $.isNumeric(valA) && $.isNumeric(valB) ? valA - valB : valA.localeCompare(valB)
	    }
}

function no_accent(my_string) {
	var new_string = "";
	var pattern_accent = new Array("é", "è", "ê", "ë", "ç", "à", "â", "ä", "î", "ï", "ù", "ô", "ó", "ö");
	var pattern_replace_accent = new Array("e", "e", "e", "e", "c", "a", "a", "a", "i", "i", "u", "o", "o", "o");
	if (my_string && my_string!= "") {
	    for(var i = 0; i < pattern_accent.length; i++){
	        my_string = my_string.replace(pattern_accent[i], pattern_replace_accent[i]);
	    }	
	}
	return my_string;
}

function getCellValue(row, index){ 
	switch (index) {
	case 0: // Name
		return no_accent( $(row).children('td').eq(index).children('a').text().toLowerCase() );
		break;
	default:
		return no_accent( $(row).children('td').eq(index).children('span').text() );
		//return $(row).children('td').eq(index).html();
	} 
}

// additional code to apply a filter
$('table').each(function(){
    var table = $(this)
    var headers = table.find('th').length;
    var filterrow = table.find('th:first()').prepend($('<div>').attr('class','input-append').click(function(){return false;}));
    filterrow.find('div').append($('<input>').attr('type','text').keyup(function(){
	        table.find('tr').show()
            filterrow.find('input[type=text]').each(function(){
	            var index = $(this).parent().index() + 1;
	            var filter = $(this).val() != '';
	            $(this).toggleClass('filtered', filter);
	            if (filter){
	                var el = 'td:nth-child('+index+') > span.data';
	                var criteria = ":contains('"+$(this).val().toLowerCase()+"')";
	                table.find(el+':not('+no_accent(criteria)+')').parent().parent().hide();
	            }
            });
        }));
    filterrow.find('div').append($('<span>').attr('class','btn').attr('type','button').text('C').click(function(){
        $(this).parent().parent().find('input[type=text]').val('').toggleClass('filtered', false)
        table.find('tr').show()
    }))
})
     
});

</script>

${next.body()}