分页器的使用-1 自己找的分页器插件

article/2025/8/24 3:31:09

这个插件是自己网上找的，具体代码如下：

具体步骤：1. 先引入css和js2. 分页器放在请求成功之后，3. 最重要的中间件就是currentPage：当前页码。4. 具体代码详情都在里面写清楚了。

用到的js文件：

https://pan.baidu.com/s/1JPuWpajTqU0CTzXUVPXG2Q

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><!-- 这三个是必须引入的 --><link rel="stylesheet" href="css/paging.css"><script src="js/jquery.min.js"></script><script src="js/paging.js"></script><link rel="stylesheet" href="css/search.css"><script src="js/interface.js"></script>
</head>
<body><section><!-- 搜索部分 --><div class="list_pagination"></div><!-- 分页 --><div class="box"></div></section><script>// 当前页数var currentPage = 1;// 一页显示的数量  var count = 5;// 总页数  默认为0var pageCount = 0;// 请求搜索接口  形参为页码，从分页器那里获取  当第一次加载页面时，在执行函数时传进来一个currentPage = 1;function downloadData (page) {// 把熊分页器那里拿到的page赋给currentPagecurrentPage = page// 定义url中的start  也就是第几页  接口是从start=0开始,第二页的start=5,第三页start=15,也就是(current - 1)*count var start = (currentPage - 1)*count// 获取listvar liPagination = $(".list_pagination")// 获取url  count：页数  start:开始页数  keyword：搜索关键字var url = searchUrl+"&start="+(page-1)*count+"&count="+count+"&keyword="+""// 数据请求$.getJSON(url,{},function (data) {// 成功之后先把liPagination节点删除，再放进去新的数据$(".list_pagination_index").remove();// 数据成功，遍历数据放在节点中for(var item of data.data){// console.log(item.id)var li = document.createElement('li');li.innerHTML = `<div class="list_pagination_index" id="box"><img src="${imagePrefix}${item.img_url}" alt=""><div class="count"><div class="title">${item.title}</div><div><div class="time_1"><span>//</span> <span>TAG:</span></div><span class="time">${item.post_date}</span></div><p>${item.forward}    </p></div></div>`//把节点一个个放在网页中 liPagination.append(li);}// 拿到数据中的总数var total = data.total// 通过ceil向上取整得到总页数  pageCount为前面的全局变量pageCount = Math.ceil(total / count)// 分页$('.box').paging({initPageNo: currentPage, // 初始页码  初始值为1totalPages: pageCount, //总页数 总页数在data数据中得到slideSpeed: 600, // 缓动速度。单位毫秒// jump: true, //是否支持跳转callback: function(page) { // 回调函数// 因为分页器一直处于数据请求函数中，而downloadData()函数传进来的page直接赋给了currentPage，// 在downloadData()函数中，page一直等于currentPage，就会一直请求数据下载//因此当page和当前页相同时退出，不执行downloadData(), 避免多次下载数据if(page == currentPage){return}// console.log(page)// 重新获取数据  调用search搜索函数  把页码传出去downloadData(page)}});})}downloadData(currentPage)</script>
</body>
</html>