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>Documenttitle>
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案例 - 分页)