list.html

{% extends "base.html" %}
{% block script %}

<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.6.0.min.js"></script>

{% endblock script %}
{% block content %}
<div class="container">
    <div class="list-group">
        {%for dr in duorou%}
        <a href="/dr/detail?id={{(cp|int-1)*10+loop.index}}" class="list-group-item list-group-item-action" aria-current="true">
            <div class="d-flex justify-content-start">
                <div>
                    <img src="{{dr.url}}"
                         class="figure-img rounded" alt="" style="width:100px;">
                </div>
                <div class="ms-4  mt-3">
                    <h5 class="mb-1">{{dr.title}}</h5>
                    <p class="mb-1">{{dr.detail}}</p>
                </div>
            </div>
        </a>
         {%endfor%}
    </div>
    <div aria-label="page navigation" id="nav_navigation" class="mt-3">
    </div>
</div>
<script>
$(function(){

refreshPages({{tp }}, {{cp}});
/**
 * 刷新页码方法
 * @param totalPage
 * @param currentPage
 */
function refreshPages(totalPage, currentPage) {

    //安全判断
    if (currentPage < 1 ) {
        currentPage = 1;
    }
    if (currentPage > totalPage) {
        currentPage = totalPage;
    }
    var paginationInfo = getPagination(totalPage, currentPage);
    //用id选择器写入页码部分代码（根据需求修改）
    $("#nav_navigation").html(paginationInfo);

}
/**
 * 获取分页
 * @param totalPage  页码总量
 * @param currentPage 当前页码
 * @returns {String}
 */
function getPagination(totalPage, currentPage){

    var paginationInfo = "<ul class='pagination pagination-sm justify-content-end' >";
    if (currentPage == 1) {
        paginationInfo += "<li class='disabled page-item'><a class='page-link' href='/dr/list?page={{cp| int-1}}'"+">«</a></li>";
    }else {
        //前一页
        paginationInfo += "<li class='page-item'><a class='page-link' href='/dr/list?page={{cp |int-1}}'"+">«</a></li>";

    }

    if(totalPage<=10){
        //totalPage<=10
        for(var i=1; i<=totalPage; i++){
            if (i == currentPage) {
                paginationInfo += "<li class='active page-item'> <a class='page-link' href='/dr/list?page="+i+"'>" + i + "</a></li>";
            }else {
                paginationInfo += "<li class='page-item'><a class='page-link' href='/dr/list?page="+i+"'>" + i + " </a></li>";
            }
        }
    }
    else{
        //totalPage > 10
        if(currentPage<=3){
            for(var i=1; i<=currentPage+2; i++){
                //页码1、2
                if (i == currentPage) {
                    paginationInfo += "<li class='active page-item'> <a class='page-link' href='/dr/list?page="+i+"' onclick='refreshPages(" + totalPage + " , " + i + ");searchJob(" + i + ")'>" + i + "</a></li>";
                } else {
                    paginationInfo += "<li class='page-item'> <a class='page-link' href='/dr/list?page="+i+"' onclick='refreshPages("+ totalPage + " , " + i + ");searchJob(" + i + ")'>" + i + "</a></li>";
                }
            }
            paginationInfo += "<li class='page-item'><a class='page-link' href='javascript:void(0);'>...</a></li>";
            //最后一页的页码
            paginationInfo += "<li class='page-item'><a class='page-link' href='/dr/list?page="+totalPage+"'>" + totalPage + "</a></li>";
        }else if(currentPage<=totalPage-5){
            //totalPage > 10   currentPage > 3 currentPage<=totalPage-5，  页码在中间部分
            //页码为1的代码
            paginationInfo += "<li class='page-item'><a class='page-link' href='/dr/list?page=1'>" + 1 + "</a></li>";

            //页码1后面的省略号
            paginationInfo += "<li class='page-item'><a class='page-link' href='javascript:void(0);'>...</a></li>";

            //中间部分代码
            for(var i=currentPage-1; i<=currentPage+2; i++){
                if (i == currentPage) {
                    paginationInfo += "<li class='active page-item'> <a class='page-link' href='/dr/list?page="+i+"'>" + i + "</a></li>";
                } else {
                    paginationInfo += "<li class='page-item'> <a class='page-link' href='/dr/list?page="+i+"'>" + i + "</a></li>";
                }
            }
            //后面的省略号
            paginationInfo += "<li class='page-item'><a class='page-link' href='javascript:void(0);'>...</a></li>";
            //最后一个页码
            paginationInfo += "<li class='page-item'><a class='page-link' href='/dr/list?page="+totalPage+"'>"+totalPage+"</a></li>";
        }else{
            //totalPage > 10  并且currentPage > totalPage-5 显示后面的页码

            //页码1
            paginationInfo += "<li class='page-item'><a class='page-link' href='/dr/list?page=1'>"+1+"</a></li>";
            //省略号
            paginationInfo += "<li class='page-item'><a class='page-link' href='javascript:void(0);'>...</a></li>";
            //最后几位页码
            for(var i=currentPage-1; i<=totalPage; i++){
                if (i == currentPage) {
                    paginationInfo += "<li class='active page-item'> <a class='page-link' href='/dr/list?page="+i+"'>"+i+"</a></li>";
                }else {
                    paginationInfo += "<li class='page-item'> <a class='page-link' href='/dr/list?page="+i+"'>"+i+"</a></li>";
                }
            }
        }
    }

    //下一页
    if (currentPage == totalPage) {
        paginationInfo += "<li class='disabled page-item'> <a class='page-link' href='/dr/list?page="+(currentPage + 1)+"'" + ">»</a></li>";
    } else {
        paginationInfo += "<li class='page-item'><a class='page-link' href='/dr/list?page="+(currentPage + 1)+"'"+">»</a></li>";
    }
    paginationInfo += "</ul>";
    //返回结果
    return paginationInfo;
}


})


</script>
{% endblock %}