From c293c84a945a82ca84d11077ee9d96f68fc9ce1c Mon Sep 17 00:00:00 2001 From: emkael Date: Wed, 12 Apr 2017 18:41:41 +0200 Subject: Table pagination --- http/res/ranking.js | 284 +++++++++++++++++++++++++++++++++---------------- templates/ranking.html | 6 +- 2 files changed, 198 insertions(+), 92 deletions(-) diff --git a/http/res/ranking.js b/http/res/ranking.js index 2bba8a1..c0338dd 100644 --- a/http/res/ranking.js +++ b/http/res/ranking.js @@ -1,100 +1,202 @@ -var playerClick = function(ev) { - if (!$(ev.target).closest('a').size()) { - var row = $(this); - var pid = row.find('td.pid').text(); - if (pid) { - var link = 'players/' + pid.trim() + '.html'; - location.href = link; - } +$.fn.paginate = function(pagesize, page) { + + var $this = this; + if (pagesize == 'clear') { + $this.removeAttr('data-paginate'); + $this.find('[data-paginate-visible]').removeAttr('data-paginate-visible'); + $this.find('tbody tr').show(); + return; + } + + var pagesize = pagesize || 50; + var page = page || 1; + + var rows = $this.find('tbody tr'); + if (!$this.attr('data-paginate')) { + $this.attr('data-paginate', pagesize); + rows.filter(':visible').attr('data-paginate-visible', 1); + } else { + pagesize = parseInt($this.attr('data-paginate')); } -} - -var parseHash = function() { - var hash = location.hash.replace(/^#/, ''); - var hashParams = hash.split(';'); - var params = new Map(); - hashParams.forEach(function(hashParam) { - var param = hashParam.split(':'); - if (param.length > 1) { - params.set(param[0], param[1].split(',')); + + var visible = rows.filter('[data-paginate-visible=1]'); + visible.each(function(index, row) { + row = $(row); + if (index >= (page-1)*pagesize + && index < page*pagesize) { + row.show(); + } else { // rollin', rollin', rollin'... + row.hide(); } }); - return params; -} - -var constructHash = function(params) { - return Array.from(params).map(function(param) { - return param[0] + ':' + param[1].join(','); - }).join(';'); -} - -var readHash = function() { - $('button.btn-primary').removeClass('btn-primary'); - var params = parseHash(); - params.forEach(function(values, param) { - values.forEach(function(value) { - $('button[data-filter="' + param + '"][data-value="' + value + '"]').addClass('btn-primary'); + + return visible.size(); +}; + +var ranking = { + + playerClick : function(ev) { + if (!$(ev.target).closest('a').size()) { + var row = $(this); + var pid = row.find('td.pid').text(); + if (pid) { + var link = 'players/' + pid.trim() + '.html'; + location.href = link; + } + } + }, + + parseHash : function() { + var hash = location.hash.replace(/^#/, ''); + var hashParams = hash.split(';'); + var params = new Map(); + hashParams.forEach(function(hashParam) { + var param = hashParam.split(':'); + if (param.length > 1) { + params.set(param[0], param[1].split(',')); + } }); - }); - var allParams = ['age', 'gender', 'region']; - allParams.forEach(function(param) { - if ($('button[data-filter="' + param + '"].btn-primary').size() == 0) { - $('button[data-clear="' + param + '"]').addClass('btn-primary'); + return params; + }, + + constructHash : function(params) { + return Array.from(params).map(function(param) { + return param[0] + ':' + param[1].join(','); + }).join(';'); + }, + + readHash : function() { + $('button.btn-primary').removeClass('btn-primary'); + var params = ranking.parseHash(); + params.forEach(function(values, param) { + values.forEach(function(value) { + $('button[data-filter="' + param + '"][data-value="' + value + '"]').addClass('btn-primary'); + }); + }); + var allParams = ['age', 'gender', 'region']; + allParams.forEach(function(param) { + if ($('button[data-filter="' + param + '"].btn-primary').size() == 0) { + $('button[data-clear="' + param + '"]').addClass('btn-primary'); + } else { + $('#filters').collapse(); + } + }); + ranking.filterRows(params); + var pagesize = 40; + var page = params.get('page') || [0]; + var count = $('table.table-paginate').paginate(pagesize, parseInt(page[0])); + ranking.buildPaginator('#top-paginator', count, pagesize, page[0] || 1); + ranking.buildPaginator('#bottom-paginator', count, pagesize, page[0] || 1); + }, + + filterRows : function(params) { + $('table.table tbody tr').show().removeClass('gold silver bronze').each(function() { + var row = $(this); + var hidden = false; + params.forEach(function(value, param) { + if (param != 'page') { + if (value.indexOf(row.find('td.' + param).text().trim()) == -1) { + row.hide(); + hidden = true; + } + } + }); + if (!hidden) { + row.show(); + } + }); + $('table.table tbody tr:visible').eq(0).addClass('gold'); + $('table.table tbody tr:visible').eq(1).addClass('silver'); + $('table.table tbody tr:visible').eq(2).addClass('bronze'); + $('table.table').css('opacity', 1); + }, + + buildPaginator: function(selector, count, pagesize, page) { + var box = $(selector); + box.html(''); + var buttonGroup = $('
').addClass('btn-group'); + var pages = parseInt(Math.ceil(count / pagesize)); + buttonGroup.attr('data-pages', pages); + buttonGroup.append($('
+
+
- +
@@ -125,6 +127,8 @@
Miejsce
+
+
© 2017 - dla PZBS zrobił mkl. Też sobie zrób. -- cgit v1.2.3