生写js 垃圾分页器

分页器"/>

生写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?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 <spanclass="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?page=1" aria-label="Previous"><span aria-hidden="true">&lt;&lt;</span></a></li><li class="previous ml-2"><a href="www.dnmd?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?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?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: <spanclass="text-dark">94pages,</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” 目录下