TwitchBot/web/templates/ladder.jade

extends layout
block content
    div.uk-grid
        br
        br
        div.uk-width-1-1
            div.uk-panel.uk-panel-box
                div.uk-badge.uk-float-right
                    form.uk-search
                        input(class='uk-search-field', type='search', placeholder='Search...')
                        button(class='uk-close', type='reset')
                table.uk-table.uk-table-hover.uk-table-striped
                    caption Potato Farmer Ladder Rankings
                    thead
                        tr
                            th Rank
                            th Viewer
                            th Potatoes
                    tbody
            ul.uk-pagination

block postscript
    script.
        var perPage = 20,
            data = !{JSON.stringify(rows)};

        $(document).ready(function(){

            // Live search of the ladder listings
            $('.uk-search-field').keyup(function() {
                var query = $(this).val();

                if(query.length > 2) {
                    var temp = $('.uk-active').attr('page');
                    $('.uk-active').removeClass('uk-active').empty().append('<a>'+temp+'</a>');
                    $('table > tbody').empty();

                    data.forEach(function(element, index, array) {
                        if(element.user.search(new RegExp(query, 'i')) != -1) {
                            $('table > tbody').append($('<tr></tr>').append('<td>'+index+'</td><td>'+element.user+'</td><td>'+element.points+'</td>'));
                        }
                    });
                }
            });

            // Create pagination buttons
            for(var i = 1; i <= Math.ceil(data.length/perPage); i++) { 
                var button = $('<li page='+i+'></li>').append('<a>'+i+'</a>');
                button.on('click', function(){
                    //get page
                    var z = $(this).attr('page');
                    
                    // cleanup
                    var temp = $('.uk-active').attr('page');
                    $('.uk-active').removeClass('uk-active').empty().append('<a>'+temp+'</a>');
                    $('table > tbody').empty(); 

                    $(this).addClass('uk-active').empty().append('<span>'+z+'</span>'); 

                    // slice(a, b): a = (n*(x-1))+1, b = n*x where n = perPage and x=curerntPage (skip +1 at end of a for splice)
                    var a = (perPage*(z-1)),
                        b = perPage*z;
                        
                    data.slice(a, b).forEach(function(element, index, array){
                        $('table > tbody').append($('<tr></tr>').append('<td>'+(a+index+1)+'</td><td>'+element.user+'</td><td>'+element.points+'</td>'));
                    });
                });

                $('.uk-pagination').append(button);
            }

            // When search input is cleared, go back to first page
            $('.uk-close').on('click', function(){
                $('ul.uk-pagination > li').first().click();
            });

            // Show the first page when we load up
            $('ul.uk-pagination > li').first().click();
        });