关于对pagination.js源代码进行修改且引入项目使用

本文主要是介绍关于对pagination.js源代码进行修改且引入项目使用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

实现效果

使用定时器对组件进行每秒请求，每过固定时间之后，进行下一页项目请求，进行到最后一页请求的时候返回第一页。

首先引入js插件

<script src="./js/pagination.js" type="text/javascript"></script>

然后在HTML页面上进行请求

<div class="setPageDiv"><div class="Pagination" id="pagination"></div>
</div>

在js代码中进行定义

 var showNum = 15; //每页条数var dataL = res.count;//总条数var pageNum = Math.ceil(dataL / showNum);//总页数$('.Pagination').pagination(pageNum, {num_edge_entries: 1, //边缘页数num_display_entries: 4, //主体页数items_per_page: 1, //每页显示1项prev_text: "上一页",next_text: "下一页",current_page: 0,callback: function(index) {//index是页数索引值//回调函数当你点击数字或者上一页,下一页的时候发生的事件                        }})

然后你就看到了这个页面

基础实现之后，开始实现源代码的修改

在源代码的事件中，只有上一页跟下一页事件，所以我们直接加入一些新的事件

在pagination.js中加入回到首页

     //上一页this.prevPage = function() {if (current_page > 0) {pageSelected(current_page - 1);return true;}else {return false;}}//下一页this.nextPage = function() {if (current_page < numPages() - 1) {pageSelected(current_page + 1);return true;}else {return false;}}//回到首页this.firstPage = function() {pageSelected(0);return true;}

然后在我们写的页面js中调用方法

$('.Pagination').trigger('firstPage');
$('.Pagination').trigger('nextPage');

这里我加入了是否继续轮播

 //如果本地储存没有definitions,则为不轮播(默认进入不轮播)if(localStorage.getItem('definitions') == null){md1.definitions = falseelse{//如果本地有值且值为true,则为轮播if(localStorage.getItem('definitions') == 'true'){md1.definitions = trueconst intver = setInterval(()=>{if(md1.intvermo == 1){clearInterval(intver)else{if(md1.waisum == pageNum){md1.waisum = 0$('.Pagination').trigger('firstPage');}else{$('.Pagination').trigger('nextPage');}}md1.waisum = md1.waisum + 1},parseInt(md1.lunbotime)*1000)}else{md1.definitions = false}}

还可以加入刚进入页面判断它是第几页，然后直接跳转到分页的第几页

在pagination.js中加入

     //回调页面第几页this.playblack = function(){//从页面路径取到pages是第几页const searchParams = new URLSearchParams(location.search);pageSelected(parseInt(searchParams.get('pages')))return true;}

在界面js中使用