jqueryjquery-pagination

Adding Zero Before Number + jQuery Pagination


Is there any way to add "0" before the pagination number? now out put showing 1 2 3 4. I want to show like 01 02 03 04 05

<div id="pagination-container"></div>


<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/simplePagination.js/1.6/jquery.simplePagination.js'></script>
 var items = $(".list-wrapper .list-item");
    var numItems = items.length;
    var perPage = 5;
    var nnn = 0;
    items.slice(perPage).hide();

    if( numItems > 5 ){
    $('#pagination-container').pagination({
        items: numItems,
        itemsOnPage: perPage,
        prevText: '<img src="<?php echo get_stylesheet_directory_uri();?>/assets/images/page-left-arrow.svg" alt="">',
        nextText: '<img src="<?php echo get_stylesheet_directory_uri();?>/assets/images/page-right-arrow.svg" alt="">',
        onPageClick: function (pageNumber) {
            var showFrom = perPage * (pageNumber - 1);
            var showTo = showFrom + perPage;
            items.hide().slice(showFrom, showTo).show();
            $('html,body').animate({
                          scrollTop: jQuery(".regulatory-block").offset().top - 150

                        }, 500);
        }
    });
}   

Solution

  • Using jquery.simplePagination.js

    https://flaviusmatis.github.io/simplePagination.js/

    The pagelink is generated with this code:

    $link = $('<a href="' + o.hrefTextPrefix + (pageIndex + 1) + o.hrefTextSuffix + '" class="page-link">' 
            + (options.text) 
            + '</a>')
    

    where options.text is:

    options = $.extend({
                    text: pageIndex + 1,
                    classes: ''
                }, opts || {});
    

    given the +1 the text will be numeric unless overwritten for next/prev buttons. For numeric (not next/prev) links, the method that builds the page-button is called with:

    methods._appendItem.call(this, i);
    

    with no option to pass in a formatter or additional opts or callback.

    So, out of the box, using the CDN, the answer to:

    Is there any way to add "0" before the pagination number?

    is: No, not using this plugin as it is.


    If you're ok copying the jquery.simplePagination.js to your site/server and linking to it there instead of from the CDN, you can change the rendering of the page number, eg from:

    ' + (options.text) + '
    

    to

    ' + (options.text+"").padStart(2, "0") + '
    

    note, this also applies a few lines above for the "current" page