Skip to content

Instantly share code, notes, and snippets.

@GudarJs

GudarJs/pagination.hbs

Last active November 14, 2017 02:54
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save GudarJs/6c3ece4b92fa6b9e42218a95ca289f7b to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save GudarJs/6c3ece4b92fa6b9e42218a95ca289f7b to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. GudarJs revised this gist Nov 14, 2017. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion pagination.hbs
    View file
    Original file line number Diff line number Diff line change
    @@ -3,7 +3,7 @@

    </ul>

    <div id="page-total" style="display:none;">{{total}}</div>
    <div id="page-total" style="display:none;">{{pages}}</div>
    <div id="page-current" style="display:none;">{{page}}</div>
    </div>

  2. GudarJs revised this gist Nov 14, 2017. No changes.
  3. GudarJs revised this gist Nov 14, 2017. No changes.
  4. GudarJs created this gist Nov 14, 2017.
    57 changes: 57 additions & 0 deletions pagination.hbs
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,57 @@
    <div class="row" style="display: none;">
    <ul id="pagination-list" class="pagination col s12 m8 offset-m2" role="navigation" style="display: flex; justify-content: center;">

    </ul>

    <div id="page-total" style="display:none;">{{total}}</div>
    <div id="page-current" style="display:none;">{{page}}</div>
    </div>

    <script>
    var limit = 5;
    var pageTotal = document.getElementById('page-total').innerHTML;
    var pageCurrent = parseInt(document.getElementById('page-current').innerHTML);
    var nav = document.getElementById('pagination-list');
    var olderClass = 'class="waves-effect"';
    var newerClass = 'class="waves-effect"';
    if (pageCurrent == 1) {
    olderClass = 'class="disabled"';
    }
    if (pageCurrent == pageTotal) {
    newerClass = 'class="disabled"';
    }
    var older = '<li ' + olderClass + '><a href="/page/' + (pageCurrent - 1).toString() + '"><i class="material-icons" style="padding: 0.5rem;">chevron_left</i></a></li>';
    var newer = '<li ' + newerClass + '><a href="/page/' + (pageCurrent + 1).toString() + '"><i class="material-icons" style="padding: 0.5rem;">chevron_right</i></a></li>';
    var first = '<li ' + olderClass + '><a href="/page/1" style="padding:0;"><i class="material-icons" style="padding: 0.5rem; margin-right: -4rem;">chevron_left</i><i class="material-icons" style="padding: 0.5rem;">chevron_left</i></a></li>';
    var last = '<li ' + newerClass + '><a href="/page/' + pageTotal.toString() + '" style="padding:0;"><i class="material-icons" style="padding: 0.5rem;">chevron_right</i><i class="material-icons" style="padding: 0.5rem; margin-left: -4rem">chevron_right</i></a></li>';
    var pagination = first + older;
    var firstPage = 0;
    if ((pageTotal - limit) > 0) {
    if (pageCurrent > (pageTotal - limit) && pageCurrent <= pageTotal)
    {
    firstPage = (pageTotal - limit)
    }
    }
    for (i = firstPage + 1; i <= pageTotal; i++) {
    var margin = 'style="margin-left: 0.5rem;"'
    if (i > firstPage + limit) {
    break;
    }
    if (i == 1) { margin = '' }
    // If you are on the current page, do not link
    if (i == pageCurrent) {
    pagination = pagination + '<li class="active cyan darken-2 grey-text text-lighten-5" ' + margin + '><a href="">' + i +'</a></li>';
    } else {
    // Otherwise, add a link to the page
    pagination = pagination + '<li class="waves-effect grey lighten-5 cyan-text text-darken-2" ' + margin + '><a href="/page/' + i + '"> ' + i + '</a></li>';
    }
    }
    pagination = pagination + newer + last;
    if (pageTotal > 1) {
    nav.parentNode.style.display = "block";
    nav.innerHTML = pagination;
    }
    </script>