BootstrapのPaginationを静的ジェネレータで良い感じに表示するためのサンプル

Paginationはよく使うので、Bootstrap＋静的ジェネレータで使いやすいサンプルのメモを残しておきます。 使い方のイメージはコメントにも書いたけど、以下のような表示をイメージしたサンプルになっています。

• 1
• 2 (current)
• 3
• 4
• 5
• » Next

• « Previous
• 3
• 4
• 5 (current)
• 6
• 7
• » Next

• « Previous
• 6
• 7
• 8
• 9 (current)
• 10

ページの最初と最後では «, » を表示しないようにして指定の個数ぶんだけ表示するようにしています。 コードは以下。Pythonなので好きな言語に書き直してください。

def getPagination(maxPage, currPos):
    html = "<div class='text-center'><nav><ul class='pagination justify-content-center'>\n"
    displayNum = 2  # 5,6,[7],8,9 --> 2
    if currPos - displayNum < 1:  # <start>1,[2],3,4,5
        startPos = 1
        endPos = startPos + displayNum * 2
    else:
        lastPos = maxPage - (displayNum * 2)
        if currPos + displayNum < n:  # 3,4,[5],6,7
            startPos = currPos - displayNum
            endPos = currPos + displayNum
        else:  # 6,7,8,[9],10<end>
            startPos = lastPos
            endPos = maxPage

    if 1 < currPos - displayNum:
        url = '/foo/bar/%+d/' % i
        html += '''
            <li class="page-item">
              <a class="page-link" href="{url}" aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
                <span class="sr-only">Previous</span>
              </a>
            </li>
'''.format(url=url)

    for i in range(startPos, endPos+1):
        url = '/foo/bar/%+d/' % i
        if i == currPos:
            html += "<li class='page-item active'><a class='page-link' href='%s'>%d <span class='sr-only'>(current)</span></a></li>" % (url, i)
        else:
            html += "<li class='page-item'><a class='page-link' href='%s'>%d</a></li>" % (url, i)

    if currPos + displayNum < maxPage:
        url = '/foo/bar/%+d/' % i
        html += '''
            <li class="page-item">
              <a class="page-link" href="{url}" aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
                <span class="sr-only">Next</span>
              </a>
            </li>
'''.format(url=url)

    html += "</ul></nav></div>\n"
    return html

よく使うし簡単な実装な割には意外と行数がかさばる。 Paginationの作成に2-30分も取られるのは良くないので、再利用しやすい形で残しておくのが良いかと思います。