生写js 垃圾分页器

1、js代码

$(document).ready(function () {

    let page_recent = parseInt($("#page_recent").val()); //当前 页码
    let page_total = parseInt($("#page_total").val());  // 总 页码
    let per_page_counts = parseInt($("#per_page_counts").val()); // 每页多少条数据
    let article_counts = parseInt($("#article_counts").val()); //数据总数
    let path = $("#full_path").val();

    if (article_counts <= 0) {
        $("ul.pagination").parents('nav').html('');
    } else {
        let per_page_btns = 5;  // 每页显示 分页按钮数
        let remainder = page_recent % per_page_btns;

        createPages(page_recent, page_total, remainder, per_page_btns, path);
        createCounts(per_page_counts, article_counts, page_recent); // 当前页 是总数据 141 的 1-20 条
    }


    function createPages(curentNum, page_total, remainder, per_page_btn, path) {
        let start = (remainder === 0) ? curentNum - per_page_btn + 1 : curentNum - remainder + 1;
        let end = (remainder === 0) ? curentNum : curentNum - remainder + per_page_btn;
        for (j = start; j <= end; j++) {
            let li;
            if (j > 0 && j <= page_total) {
                if (j === curentNum) {
                    li = '<li class="page-item ml-2"><a class="active" href="' + path + j + '">' + j + '</a></li>';
                } else {
                    li = '<li class="page-item ml-2"><a class="" href="' + path + j + '">' + j + '</a></li>';
                }
                $('#pages_ul').append(li);
            }
        }
    }

    $("#go-page").click(function () {
        if ($(this).prev().val()) {
            window.location.href = path + $("#go-page").prev().val();
        }
    });

    function createCounts(per_counts, counts, page_curent) {
        let p1 = (0 < ((page_curent - 1) * per_counts + 1) <= counts) ? ((page_curent - 1) * per_counts + 1) : 0;
        let p2 = ((page_curent * per_counts) < counts) ? page_curent * per_counts : counts;
        $("#position-1").text(p1);
        $("#position-2").text(p2);
    }
});

2、html代码

<nav class="d-flex justify-content-between mt-5"
     aria-label="Page navigation container large">
    <input type="hidden" id="page_recent" value="2">
    <input type="hidden" id="page_total" value="94">
    <input type="hidden" id="per_page_counts" value="20">
    <input type="hidden" id="article_counts" value="1864">
    <input type="hidden" id="full_path" value="www.dnmd.com?page=">

    <ul class="pagination pagination-lg pager d-flex">
        <li class="d-flex ml-5 pl-5">
            <div class="m-auto">
                <span class="text-dark" id="position-1"></span>
                <span class="text-dark">-</span>
                <span class="text-dark" id="position-2"></span>
            </div>

            <div class="m-auto pl-1">of <span
                    class="text-dark">1864</span>
                records
            </div>
        </li>
    </ul>
    <ul class="pagination pagination-lg pager justify-content-end">
        {% if orders.has_previous %}
            <li class="previous">
                <a href="www.dnmd.com?page=1" aria-label="Previous">
                    <span aria-hidden="true">&lt;&lt;</span>
                </a>
            </li>
            <li class="previous ml-2">
                <a href="www.dnmd.com?page={{ orders.previous_page_number }}"
                   aria-label="Previous">
                    <span aria-hidden="true">&lt;</span>
                </a>
            </li>
        {% endif %}
        <ul class="pagination pagination-lg pager justify-content-center"
            id="pages_ul">
        </ul>
        {% if orders.has_next %}
            <li class="next ml-2">
                <a href="www.dnmd.com?page={{ orders.next_page_number }}"
                   aria-label="Next">
                    <span aria-hidden="true">&gt;</span>
                </a>
            </li>
            <li class="next ml-2">
                <a href="www.dnmd.com?page={{ orders.paginator.num_pages }}"
                   aria-label="Next">
                    <span aria-hidden="true">&gt;&gt;</span>
                </a>
            </li>
        {% endif %}
        <li class="d-flex mb-3">
            <div class="d-flex text-center ml-2">
                                                <span class="m-auto">Total: <span
                                                        class="text-dark">94
                                                        pages,</span></span>
                <span class="m-auto pl-2 pr-2">To page:</span>
            </div>
            <input type="number">
            <button class="btn btn-outline-primary btn-sm" type="button"
                    id="go-page">GO
            </button>
        </li>
    </ul>
</nav>

3、显示

ps：DNMD

Linux:  mkdir -p /root/abc && cp * -rf "$_"，命令大意是：强制复制 当前目录下的所有 到 mkdir创建的 “abc” 目录下