Table pagination

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 = $('<div>').addClass('btn-group');
+        var pages = parseInt(Math.ceil(count / pagesize));
+        buttonGroup.attr('data-pages', pages);
+        buttonGroup.append($('<button>').addClass('btn btn-default paginator-prev').attr('type', 'button').text('<<'));
+        for (var i = 0; i < pages; i++) {
+            var pageBtn = $('<button>').addClass('btn btn-default paginator-page').attr('type', 'button').attr('data-page', i+1).text(i+1);
+            if (i+1 == page) {
+                pageBtn.addClass('btn-primary');
+            }
+            buttonGroup.append(pageBtn);
+        }
+        buttonGroup.append($('<button>').addClass('btn btn-default paginator-next').attr('type', 'button').text('>>'));
+        box.append(buttonGroup);
+    },
+
+    changePage: function() {
+        $('table.table').css('opacity', 0.1);
+        var btn = $(this);
+        var page = parseInt(btn.attr('data-page'));
+        var params = ranking.parseHash();
+        var currentPage = params.get('page');
+        currentPage = currentPage ? parseInt(currentPage[0]) : 1;
+        if (btn.hasClass('paginator-prev')) {
+            page = currentPage - 1;
+        }
+        if (btn.hasClass('paginator-next')) {
+            page = currentPage + 1;
+        }
+        var count = parseInt(btn.closest('[data-pages]').attr('data-pages'));
+        if (page > 0 && page <= count) {
+            params.set('page', [page]);
+            location.hash = ranking.constructHash(params);
         } else {
-            $('#filters').collapse();
+            $('table.table').css('opacity', 1);
         }
-    });
-    filterRows(params);
-}
-
-var filterRows = function(params) {
-    $('table.table tbody tr').show().removeClass('gold silver bronze').each(function() {
-        var row = $(this);
-        params.forEach(function(value, param) {
-            if (value.indexOf(row.find('td.' + param).text().trim()) == -1) {
-                row.hide();
+    },
+
+    init : function() {
+
+        $('.container .table tbody tr').click(ranking.playerClick);
+
+        $(document).ready(function() {
+            $(window).on('hashchange', ranking.readHash).trigger('hashchange');
+        });
+
+        $('button[data-filter]').click(function() {
+            $('table.table-paginate').paginate('clear');
+            $('table.table').css('opacity', 0.1);
+            var button = $(this);
+            var params = ranking.parseHash();
+            var param = params.get(button.attr('data-filter'));
+            var value = button.attr('data-value');
+            var index = param ? param.indexOf(value) : -1;
+            if (index > -1) {
+                param = param.filter(function(v) { return v != value; });
+            } else {
+                if (!param) {
+                    param = [];
+                }
+                param.push(value);
             }
+            if (!param.length) {
+                params.delete(button.attr('data-filter'));
+            } else {
+                params.set(button.attr('data-filter'), param);
+            }
+            params.delete('page');
+            location.hash = ranking.constructHash(params);
         });
-    });
-    $('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);
-}
-
-$('.container .table tbody tr').click(playerClick);
-
-$(document).ready(function() {
-    $(window).on('hashchange', readHash).trigger('hashchange');
-});
-
-$('button[data-filter]').click(function() {
-    $('table.table').css('opacity', 0.1);
-    var button = $(this);
-    var params = parseHash();
-    var param = params.get(button.attr('data-filter'));
-    var value = button.attr('data-value');
-    var index = param ? param.indexOf(value) : -1;
-    if (index > -1) {
-        param = param.filter(function(v) { return v != value; });
-    } else {
-        if (!param) {
-            param = [];
-        }
-        param.push(value);
-    }
-    if (!param.length) {
-        params.delete(button.attr('data-filter'));
-    } else {
-        params.set(button.attr('data-filter'), param);
+
+        $('button[data-clear]').click(function() {
+            $('table.table-paginate').paginate('clear');
+            $('table.table').css('opacity', 0.1);
+            var button = $(this);
+            var params = ranking.parseHash();
+            params.delete(button.attr('data-clear'));
+            params.delete('page');
+            location.hash = ranking.constructHash(params);
+        });
+
+        $(document).on('click', 'button.paginator-prev, button.paginator-next, button.paginator-page', ranking.changePage);
     }
-    location.hash = constructHash(params);
-});
-
-$('button[data-clear]').click(function() {
-    $('table.table').css('opacity', 0.1);
-    var button = $(this);
-    var params = parseHash();
-    params.delete(button.attr('data-clear'));
-    location.hash = constructHash(params);
-});
+
+};
+
+ranking.init();
diff --git a/templates/ranking.html b/templates/ranking.html
index 797cdef..8f668d1 100644
--- a/templates/ranking.html
+++ b/templates/ranking.html
@@ -70,8 +70,10 @@
           </div>
         </div>
       </div>
+      <div id="top-paginator" class="text-center"></div>
+      <br />
       <div class="table-responsive">
-        <table class="table table-striped table-hover table-condened">
+        <table class="table table-striped table-hover table-condened table-paginate">
           <thead>
             <tr class="text-center">
               <th colspan="2">Miejsce</th>
@@ -125,6 +127,8 @@
             </tr>
           </tbody>
         </table>
+        <div id="bottom-paginator" class="text-center"></div>
+        <br />
       </div>
       <div class="well well-sm">
         &copy; 2017 - dla <a href="http://pzbs.pl">PZBS</a> zrobił <a href="https://emkael.info">mkl.</a> Też sobie <a href="https://github.com/emkael/pzbs-ranking">zrób.</a>