Javascript, start single digit numbers with a 0?

Question

I believe this is the part of the pagination in our theme which adds page numbers at the bottom. For CSS reasons though it outputs 1, 2, 3, etc and then 10, 11, 12. To have things align properly it needs to be double digits from the start so 01, 02, 03, etc.

Is it possible to do that to this code?

// generate pagination
        if (option.generatePagination) {
            // create unordered list
            if (option.prependPagination) {
                elem.prepend('<ul class='+ option.paginationClass +'></ul>');
            } else {
                elem.append('<ul class='+ option.paginationClass +'></ul>');
            }
            // for each slide create a list item and link
            control.children().each(function(){
                $('.' + option.paginationClass, elem).append('<li><a href="#'+ number +'">'+ (number+1) +'</a></li>');
                number++;
            });
        } else {
            // if pagination exists, add href w/ value of item number to links
            $('.' + option.paginationClass + ' li a', elem).each(function(){
                $(this).attr('href', '#' + number);
                number++;
            });
        }

You could check `if(number < 10)` and use `number = '0'+number` or something if it is true — RobinvdA, Mar 13 '14 at 15:10
possible duplicate of [Pad a number with leading zeros in JavaScript](http://stackoverflow.com/questions/10073699/pad-a-number-with-leading-zeros-in-javascript) — Andy, Mar 13 '14 at 15:11
You're never going to get things to align quite right even with adding zeroes (unless you are using a monospaced font). Why not set the CSS of the LI to have a fixed width instead of using extra characters to fix formatting issues? — Paul Abbott, Mar 13 '14 at 15:13
@paul.abbott.wa.us yep you're totally right, that is the way to go, I was over thinking it. I have done that in CSS instead, although tempted to use the answer below (which is correct in context of the question too) as I think the 01 actually looks better too. Thanks. — realdannys, Mar 13 '14 at 16:19

Jonas Grumann · Accepted Answer · 2014-03-13T15:42:35.793

1

I think this should work:

control.children().each(function(){
    if (number < 10) {
        var stringNumber = '0' + (number + 1).toString()
    } else {
        var stringNumber = number + 1;
    }
    $('.' + option.paginationClass, elem).append('<li><a href="#'+ number +'">'+ (stringNumber) +'</a></li>');
    number++;
});

I created the new variable stringNumber which will hold the number represented as text, so you're still free to use the number somewhere else

edited Mar 13 '14 at 15:42

answered Mar 13 '14 at 15:12

Jonas Grumann

9,697
2
17
35

1

the one that needs to be change it's this '(number + 1)' in the same line – Juan Mar 13 '14 at 15:34
Thanks @JonasGrumann this does work, i ended up rolling with the CSS idea above which is probably the correct way to do it, although your question is really useful for anyone who wants to output a different numbering format anyway as this can be useful. – realdannys Mar 13 '14 at 16:20

Javascript, start single digit numbers with a 0?

1 Answers1