JS案例 - 分页
1.html文件
<!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>
</head>
<style>
div {
width: 800px;
height: 40px;
border: 1px solid black;
margin: 30px auto;
user-select: none;
}
</style> <body>
<div id="div1"></div>
<div id="div2"></div> <script src="./navg.js"></script>
<script>
new Navg('#div1', {
pageTag: {
first: '首页1',
prev: '上一页1',
list: null,
next: '下一页1',
last: '末页1',
}, pageInfo: {
pageNum: 5, // 当前页数
pageSize: 10, // 每页显示条数
totalData: 1000, // 总条数
totalPage: 100, // 总页数 = 向上取整（总条数 / 每页显示条数）
}
},() => {
console.log(11)
}); new Navg('#div2', {
pageTag: {
first: '首页',
prev: '上一页',
list: null,
next: '下一页',
last: '末页',
}, pageInfo: {
pageNum: 2, // 当前页数
pageSize: 10, // 每页显示条数
totalData: 1000, // 总条数
totalPage: 100, // 总页数 = 向上取整（总条数 / 每页显示条数）
}
});
</script>
</body> </html>
2.js文件
function Navg(ele, options, calback) {
this.options = options;
this.calback = calback || function () { };
// ## 默认数据
this.defaultOptions = {
pageTag: {
first: '首页',
prev: '上一页',
list: null,
next: '下一页',
last: '末页',
},
pageInfo: {
pageNum: 2, // 当前页数
pageSize: 10, // 每页显示条数
totalData: 1000, // 总条数
totalPage: 100, // 总页数 = 向上取整（总条数 / 每页显示条数）
}
}
this.defaultOptions.pageInfo.totalPage = Math.ceil(this.defaultOptions.pageInfo.totalData / this.defaultOptions.pageInfo.pageSize)
//获取页面属性
this.divObj = document.querySelector(ele)
this.divObj.style.display = 'flex'
this.divObj.style.justifyContent = 'center'
this.divObj.style.alignItems = 'center'
// 重置数据
this.setDefalutOptions();
// 调用
this.createpage();
// 初始化完成后绑定事件
this.clickEvent();
}
// 设置默认数据
Navg.prototype.setDefalutOptions = function () {
// 判断用户是否传值
if(this.options == undefined || (Object.keys(this.options).length == 0)){
return;
}
// pageTag
this.defaultOptions.pageTag.first = this.options.pageTag.first;
this.defaultOptions.pageTag.prev = this.options.pageTag.prev;
this.defaultOptions.pageTag.list = this.options.pageTag.list;
this.defaultOptions.pageTag.next = this.options.pageTag.next;
this.defaultOptions.pageTag.last = this.options.pageTag.last;
// pageInfo
this.defaultOptions.pageInfo.pageNum = this.options.pageInfo.pageNum;
this.defaultOptions.pageInfo.pageSize = this.options.pageInfo.pageSize;
this.defaultOptions.pageInfo.totalData = this.options.pageInfo.totalData;
this.defaultOptions.pageInfo.totalPage = this.options.pageInfo.totalPage;
}
// 创建分页标签
Navg.prototype.createpagenum = function () {
let pageInfo = this.defaultOptions.pageInfo;
if (pageInfo.pageNum < 5) {
for (let i = 1; i <= 5; i++) {
this.createP(i, ele = 'p')
}
this.createP('...', 'span')
for (let i = pageInfo.totalPage - 1; i <= pageInfo.totalPage; i++) {
this.createP(i, ele = 'p')
}
} else if (pageInfo.pageNum == 5) {
for (let i = 1; i <= 7; i++) {
this.createP(i, ele = 'p')
}
this.createP('...', 'span')
for (let i = pageInfo.totalPage - 1; i <= pageInfo.totalPage; i++) {
this.createP(i, ele = 'p')
}
} else if (pageInfo.pageNum > 5 && pageInfo.pageNum <= pageInfo.totalPage - 4) {
this.createP(1)
this.createP(2)
this.createP('...', 'span')
for (let i = parseInt(pageInfo.pageNum) - 2; i <= parseInt(pageInfo.pageNum) + 2; i++) {
this.createP(i, ele = 'p')
}
this.createP('...', 'span')
for (let i = pageInfo.totalPage - 1; i <= pageInfo.totalPage; i++) {
this.createP(i, ele = 'p')
}
} else if (pageInfo.pageNum >= pageInfo.totalPage - 4) {
this.createP(1)
this.createP(2)
this.createP('...', 'span')
this.createP('...', 'span')
for (let i = pageInfo.totalPage - 4; i <= pageInfo.totalPage; i++) {
this.createP(i, ele = 'p')
}
}
}
// 创建分页标签
Navg.prototype.createpage = function () {
let pageTag = this.defaultOptions.pageTag;
let pageInfo = this.defaultOptions.pageInfo;
let divObj = this.divObj;
divObj.innerHTML = '';
for (let attr in pageTag) {
let pObj = document.createElement('p')
let textObj = document.createTextNode(pageTag[attr])
if (attr == 'list') {
pageTag.list = pObj
} else {
pObj.appendChild(textObj)
pObj.style.border = '1px solid black'
pObj.style.margin = '0 5px'
pObj.style.padding = '0 5px'
pObj.style.display = 'inline-block'
}
divObj.appendChild(pObj)
}
//禁用
let pObjs = this.divObj.querySelectorAll('p')
if (pageInfo.pageNum == 1) {
pObjs[0].style.background = '#ccc'
pObjs[1].style.background = '#ccc'
}
if (pageInfo.pageNum == pageInfo.totalPage) {
pObjs[3].style.background = '#ccc'
pObjs[4].style.background = '#ccc'
}
this.createpagenum()
this.calback();
}
// // ##创建P标签
Navg.prototype.createP = function (i, ele = 'p') {
let pageInfo = this.defaultOptions.pageInfo;
let pObj = document.createElement(ele)
let textObj = document.createTextNode(i)
pObj.appendChild(textObj)
if (i == pageInfo.pageNum) {
pObj.style.background = 'skyblue'
}
if (ele != 'span') {
pObj.style.border = '1px solid black'
pObj.style.margin = '0 5px'
pObj.style.padding = '0 5px'
pObj.style.display = 'inline-block'
}
this.defaultOptions.pageTag.list.appendChild(pObj)
}
// 绑定事件
Navg.prototype.clickEvent = function () {
let pageInfo = this.defaultOptions.pageInfo;
let pageTag = this.defaultOptions.pageTag;
this.divObj.addEventListener('click', (e) => {
e = e || window.event
let target = e.target
let tc = target.innerHTML
if (target.nodeName == 'P' && tc == pageTag.first) {
pageInfo.pageNum = 1
this.createpage()
}
if (target.nodeName == 'P' && tc == pageTag.prev && pageInfo.pageNum > 1) {
pageInfo.pageNum -= 1
this.createpage()
}
if (target.nodeName == 'P' && parseInt(tc) > 0) {
pageInfo.pageNum = tc
this.createpage()
}
if (target.nodeName == 'P' && tc == pageTag.next && pageInfo.pageNum != pageInfo.totalPage) {
pageInfo.pageNum = parseInt(pageInfo.pageNum) + 1
this.createpage()
}
if (target.nodeName == 'P' && tc == pageTag.last) {
pageInfo.pageNum = pageInfo.totalPage
this.createpage()
}
})
}
特此声明：如需转载请注明出处，如有疑问请及时提出以便于改正，如有侵权，联系删除，谢谢
JS案例 - 分页的更多相关文章
- 原生js版分页插件
之前我在自己的博客里发表了一篇用angularJs自定义指令实现的分页插件,今天简单改造了一下,改成了原生JavaScript版本的分页插件,可以自定义一些简单配置,特此记录下来.如有不足之处,欢迎指 ...
- 原生JS实现分页效果2.0（新增了上一页和下一页，添加当前元素样式）
虽然写的很烂,但至少全部都是自己写的,因为这个没有固定的顺序,所以就没有封装,如果你技术好的话,可以你写的分享给我,谢谢. <!DOCTYPE html><html lang=&qu ...
- 原生JS实现分页效果1.0
不太完整,写的太急,等等加上完整注释,写起来还是有些难度的,写的有点水,后面再改进改进. <!DOCTYPE html><html lang="en">&l ...
- 纯js实现分页
原理:所有数据已加载好,js通过遍历部分显示,实现分页效果 html代码 <html> <head> <meta charset='utf-8'> <scri ...
- 单篇文章JS模拟分页
废话部分 前两天做了一个前台分页插件,支持ajax读取数据绑定前台 和 url带页码参数跳转两种方式.于是稍加改动,做了一个单篇文章js模拟分页的代码,为什么说是模拟分页呢?因为在服务器响应HTML请 ...
- js前端分页之jQuery
锋利的js前端分页之jQuery 大家在作分页时,多数是在后台返回一个导航条的html字符串,其实在前端用js也很好实现. 调用pager方法,输入参数,会返回一个导航条的html字符串.方法的内部比 ...
- Spring Data Jpa+SpringMVC+Jquery.pagination.js实现分页
本博客介绍基于Spring Data这款orm框架加上Jquery.pagination插件实现的分页功能. 介绍一下Spring Data框架 spring Data : Spring 的一个子项目 ...
- JS表格分页(封装版)
HTML代码: <html> <head> <meta charset='utf-8'> <script type="text/javascript ...
- JS重构分页
JS重构分页 很早以前写过一个Jquery分页组件,但是当时写的组件有个缺点,当时的JS插件是这样设计的:比如:点击 --> 查询按钮 ---> 发ajax请求 返回总页数和所有数据, ...
随机推荐
- 题解 P4305 【[JLOI2011]不重复数字】
来一波用vector的最短代码题解 P4305 [JLOI2011]不重复数字 关于hash表的部分大家可以看一看其他的题解,我就不说了 不定长数组vector的几个基本用法: 定义: vector& ...
- ESA2GJK1DH1K基础篇: Android连接MQTT简单的Demo
题外话 我老爸也问我物联网发展的趋势是什么!!!!!! 我自己感觉的:(正在朝着 "我,机器人" 这部电影的服务器方向发展) 以后的设备都会和服务器交互,就是说本地不再做处理,全部 ...
- 洛谷 P1508
P1508 所属知识点:DP 主要题意: 就是求一个矩阵从下边走到上边,可以走自己前方或左前方或右前方. 问走到上边一共经过的路径和. 类型题:P1216 解题思路: 参考上边的类型题(因为比较简单) ...
- SpringData JPA一对多多对一多对多关联
一.一对多.多对一 1.Country实体类 2.City实体类 3.CountryDao层 4.CityDao层 5.Controller package com.zn.controller; im ...
- 使用docker部署nginx+tomcat架构(2)：访问mysql数据库
上一篇完成了通过docker部署nginx+tomcat的基础软件架构,但是距离一个真正可用的软件架构还差得很远.其中最重要的一点是缺少数据库这个角色的存在,那么本篇就来完善这一点. 废话少说,直接进 ...
- ros ap 的无线中继
https://wiki.mikrotik.com/wiki/Manual:Interface/Wireless#Repeater Wireless repeater will allow to re ...
- c# .net 使用Confluent.Kafka针对kafka进行生产和消费
首先说明一点,像Confluent.Kafka这种开源的组件,三天两头的更新.在搜索引擎搜索到的结果往往用不了,浪费时间.建议以后遇到类似的情况直接看官网给的Demo. 因为搜索引擎搜到的文章,作者基 ...
- es6 Decorator修饰器
1.类的修饰: 修饰器(Decorator)函数,用来修改类的行为.修饰器是一个对类进行处理的函数.修饰器函数的第一个参数,就是所要修饰的目标类. @testable class MyTestable ...
- 《Linux就该这么学》培训笔记_ch12_使用Samba或NFS实现文件共享
<Linux就该这么学>培训笔记_ch12_使用Samba或NFS实现文件共享 文章最后会post上书本的笔记照片. 文章主要内容: SAMBA文件共享服务 配置共享资源 Windows挂 ...
- SQLServer ---------- 附加数据库，以及解决附加时出现错误
附加数据库的目的,进行数据库的转移,将需要的数据库,进行转移,软件在部署的时候,会经常使用 附加识别的数据库文件后缀是: .mdf 方法: 1.首先把准备好的数据库文件,放到需要还原数据库的的电脑上 ...