如何为jQuery分页数字添加前置零？

使用jQuery simplePagination.js实现分页功能时，分页数字显示为1、2、3、4，希望将其修改为01、02、03、04的两位数字格式，现有代码如下：

<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>
<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);
        }
    });
}   
</script>

方法一：利用插件内置的formatPageDisplay回调（推荐） #

simplePagination.js 1.6版本支持formatPageDisplay配置项，通过这个回调可以直接自定义页码的显示文本。只需要在分页初始化的配置中添加该选项，实现数字补零逻辑即可：

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="">',
        // 添加formatPageDisplay回调处理页码格式
        formatPageDisplay: function(pageNumber) {
            // 数字小于10时补前导0
            return pageNumber < 10 ? '0' + pageNumber : pageNumber;
        },
        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);
        }
    });
}

方法二：DOM操作修改页码文本（兼容旧版本） #

如果使用的插件版本不支持formatPageDisplay，可以通过DOM遍历修改分页按钮的文本内容。需要在分页初始化完成后和页码切换后都执行修改逻辑：

// 定义通用的页码补零函数
function formatPageNum(num) {
    return num < 10 ? '0' + num : num;
}

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="">',
        // 初始化完成后修改页码格式
        onInit: function() {
            $('#pagination-container .page-link').not('.prev, .next').each(function() {
                var num = parseInt($(this).text());
                $(this).text(formatPageNum(num));
            });
        },
        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);
            
            // 切换页码后重新修改文本（等待插件DOM渲染完成）
            setTimeout(function() {
                $('#pagination-container .page-link').not('.prev, .next').each(function() {
                    var num = parseInt($(this).text());
                    $(this).text(formatPageNum(num));
                });
            }, 10);
        }
    });
}

注：方法二中使用setTimeout是因为插件在切换页码后会重新渲染DOM，需要等待渲染完成后再修改文本。

内容的提问来源于stack exchange，提问作者Ahammed Navas K