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请求返回总页数和所有数据, ...

随机推荐

Pandas | 02 Series 系列
系列(Series)是能够保存任何类型的数据(整数,字符串,浮点数,Python对象等)的一维标记数组.轴标签统称为索引. pandas.Series Pandas系列可以使用以下构造函数创建 - p ...
异常EXCEPTION_HIJACK(0xe0434f4e)
简介 EXCEPTION_HIJACK,值为0xe0434f4e.意思是CLR线程劫持异常.异常劫持是CLR在挂起线程进行垃圾收集的过程中抛出的.它的抛出是为了帮助停止后恢复执行.它定义在..\clr ...
proc介绍，free命令查看内存
proc介绍 https://www.cnblogs.com/dongzhuangdian/p/11366910.html https://blog.csdn.net/majianting/artic ...
linux常用命令-nginx常用命令
1.ctrl+alt+f2切换到命令界面 2.ifconfig查看IP 或者IP ADDR(en33 inter) 3.使用putty终端进行交互式操作 4.shell:提供用户输入的命令解释器常用 ...
LDoc使用总结
LDoc使用总结安装按照下面的安装就可以了 http://www.cnblogs.com/ZhYQ-Note/articles/6022525.html 使用参考:官方的说明文档 https:/ ...
csv文件处理
读取csv文件 import csv with open('demo.csv', 'r') as fp: reader = csv.reader(fp) titles = next(reader) f ...
Spring定时任务(@Scheduled)
一.使用Spring的@Scheduled实现定时任务[1] 1.Spring配置文件xmlns加入 xmlns:task="http://www.springframework.org/s ...
PHP微信发红包简明教程
PHP微信发红包简明教程1首先进入公众号申请微信支付申请成功账号密码会发到你指定的邮箱是登陆商户平台的2 进入后申请发红包借口3 调用发红包接口 https://api.mch.weixin.qq ...
用代码写一个“Hello World!”
很简单:三步第一步:电脑连上Microbit 第二步:打开Mu 第三步:写程序,flash 烧录 from microbit import * display.scroll("Hello ...
模拟 --- Crashing Robots
Crashing Robots Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 7394 Accepted: 3242 D ...

JS案例 - 分页

JS案例 - 分页的更多相关文章

随机推荐

热门专题