效果图

看这里：先上资源链接

特别关注有些不了解但是感兴趣的同学，所以贴一下下载步骤，移动端页面可能不太一样，但是手边没有手机= =没法贴；

解压后，用vscode或者你们喜欢的其他编辑器打开；

（不要更改文件路径，否则引入时会报错）

使用方法：（都在html中）

1.css引入：

<link rel="stylesheet" href="./yourCutePage/yourCutePage.css">

示例：

2.js引入

 <script src="./yourCutePage/yourCutePage.js"></script>

3.html引入

<div style="text-align: center;"><div class="your-page"></div></div>

4.js

接下来的script标签是我拟造的数据（可以改成自己的）；

  <script>new YourPageInit({pages: 100, //总页数currentPage: 1, //当前页everyPageSize: 7, //bukeyi改；这是页码固定显示的li盒子element: ".your-page", //body内的div盒子名firstPage: "首页",lastPage: "末页",previousPage: "上一页",nextPage: "下一页",targetPage: "->",callback: function(pagenum) { //回调函数 pagenum里面传的是当前页码let pagesize = 10 //数据每页显示条数let startno = (pagenum - 1) * pagesize //0  10 20...900let html = ''//  for (let i = 0; i < 10; i++) 这样循环 每页是10条数据//  for (let i = 10; i < 20; i++) 这样循环 每页是10条数据//...//for (let i = 900; i < 1000; i++) 这样循环 每页是10条数据// 理解：例如每页ID是991 因为 id=i+1 (见html:51)  id=900+1=991 for (let i = startno; i < startno + pagesize; i++) {// tableDataArr[i]html += `<tr><td></td><td>${tableDataArr[i].id}</td><td>${tableDataArr[i].name}</td><td>${tableDataArr[i].age}</td><td>${tableDataArr[i].gender}</td><td>${tableDataArr[i].class}</td><td>${tableDataArr[i].score}</td></tr>`}// 拼接数据最后覆盖document.querySelector('tbody').innerHTML = htmlconsole.log("当前页码：", pagenum + "页")}});</script>

不连接的时候；试试看；

<script>new YourPageInit({pages: 100, //总页数currentPage: 1, //当前页everyPageSize: 7, //bukeyi改；这是页码固定显示的li盒子element: ".your-page", //body内的div盒子名firstPage: "首页",lastPage: "末页",previousPage: "上一页",nextPage: "下一页",targetPage: "->",callback: function(page) {console.log("当前页:", page);}});</script>

有bug可以留言；

一个注释甜美的分页插件(原生js)相关推荐

html怎么引轮播图插件,原生js写一个无缝轮播图插件(支持vue)
轮播图插件(Broadcast.js) 前言:写这个插件的原因前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...
dw按钮图片滚动js_轮播图--swiper插件/原生js/jQuery
1.swiper插件: 需要下载该插件到本地,并用link标签引用其swiper-bundle.min.css文件,用script引用其swiper-bundle.min.js文件,下载地址及官方文档 ...
html移动端选择器插件,原生js实现移动端选择器插件
原生js实现移动端选择器插件前言插件功能只满足我司业务需求,如果希望有更多功能的,可在下方留言,我尽量扩展!如果你有需要或者喜欢的话,可以给我github来个star ? 预览准备首先在页面中 ...
#displaytag：一个简易的Java分页插件(无需其他的前端分页插件) @FDDLC
一.话题引入: 在开发一个某某系统时,经常要用到分页. 比如PageHelper,它是后端分页插件,如果要在前端展示分页效果,要么自己编写前端的分页逻辑,要么再上一个前端分页插件. 而displayt ...
jquery分页插件-sPage.js使用方法
git地址:https://github.com/jvbei/sPage 这是一个非常小巧灵活的插件,默认效果也挺好看的.如下: 代码如下: jquery分页插件 1,引入样式文件,可以根据实际需要修 ...
html翻页控件,jQuery分页插件pagination.js
插件描述:基于jQuery的分页插件,配置比较详细更新时间:2018/1/12 下午5:50:39 更新说明:增加固定按钮数量模式,具体请查看文档更新时间:2017/9/21 上午10:06:18 ...
html 写字版插件,原生JS+HTML5实现的可调节写字板功能示例
本文实例讲述了原生JS+HTML5实现的可调节写字板功能.分享给大家供大家参考,具体如下: 本文实例讲述了原生JS+HTML5实现的可调节写字板功能.分享给大家供大家参考,具体如下: 前面一篇介绍了& ...
推荐一个快速获取时间的插件 Moment.js
Moment.js Moment.js: JavaScript 日期处理类库官方网址: https://momentjs.com/. 中文网: http://momentjs.cn/. 这里不仅可以 ...
插件原生js 省市区三级联动源码
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" ...

一个注释甜美的分页插件(原生js)

效果图

一个注释甜美的分页插件(原生js)相关推荐

最新文章

热门文章