分页插件的使用

最新推荐文章于 2025-02-16 00:32:53 发布

HAI6545

最新推荐文章于 2025-02-16 00:32:53 发布

阅读量453

点赞数 2

分类专栏： JavaScript案例文章标签： webview css fpga开发

本文链接：https://blog.youkuaiyun.com/HAI6545/article/details/122329961

版权

JavaScript案例专栏收录该内容

105 篇文章

订阅专栏

这段代码展示了如何使用HTML、CSS和JavaScript实现表格数据的动态加载和分页功能。通过随机生成的数据模拟了1000条记录，包括姓名、年龄和性别的展示，并在用户滚动时动态加载分页内容。同时，提供了分页导航，支持首页、上一页、下一页、末页和页码选择。此外，代码还实现了禁用无效分页链接的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    table tbody tr:hover{
        background-color: hotpink;
    }
    tbody tr:nth-child(2n){
        background-color: #abcdef;
    }
    tbody tr:nth-child(2n-1){
        background-color: #0f0;
    }
</style>
<body>
<table align="center" width=500 border=1>
    <thead>
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>
<!-- 在布局的时候需要留一个盒子放分页 -->
<div class="container"></div>
</body>
<script src="./js/page.js"></script>
<script>
// 先有数据
// 创建1000个数据
var arr = []
// 姓的集合
var str = '赵钱孙李周吴郑王冯陈褚卫蒋沈韩杨朱秦尤许何吕施张孔曹严华金魏陶姜戚谢邹喻柏水窦章云苏潘葛奚范彭郎鲁韦昌马苗凤花方俞任袁柳酆鲍史唐费廉岑薛雷贺倪汤滕殷罗毕郝邬安常乐于时傅皮卞齐康伍余元卜顾孟平黄和穆萧尹姚邵湛汪祁毛禹狄米贝明臧计伏成戴谈宋茅庞熊纪舒屈项祝董梁杜阮蓝闵席季麻强贾路娄危江童颜郭梅盛林刁钟徐邱骆高夏蔡田樊胡凌霍虞万支柯昝管卢莫经房裘缪干解应宗丁宣贲邓郁单杭洪包诸左石崔吉钮龚程嵇邢滑裴陆荣翁'
// 第二个字的集合
var str1 = '很多家族在为自己的小孩名时很注重其家族辈份的文字经常有人为了家谱辈份的字伤透脑筋事实上中国人有家谱覌是相当好不但可祖先的脉络探群的关连同时可永久流传后世家族的系与关怀经常有人说我爷或我爸规定我们家族每一人的名字都辈份的字而且还头是道所以到我这辈就用这份排序的字每次我碰到有人这么说时我都捏了一把冷汗万一用了地雷字怎么办地雷字有一下几种情况要么就是脾气很大要么身体不好指重大的会住院要么大起大落要么容易破财钱财守不住要么误导法网么些人家里姊妹全都用了秀字姊妹几个全都得了秀这个字若使用不呢豈不是'
var str2 = '天地玄黄宇宙洪荒日月盈昃辰宿列张寒来暑往秋收冬藏闰余成岁律吕调阳云腾致雨露结为霜金生丽水玉出昆冈剑号巨阙珠称夜光果珍李柰菜重芥姜海咸河淡鳞潜羽翔龙师火帝鸟官人皇始制文字乃服衣裳推位让国有虞陶唐吊民伐罪周发殷汤坐朝问道垂拱平章爱育黎首臣伏戎羌遐迩一体率宾归王鸣凤在竹白驹食场化被草木赖及万方盖此身发四大五常恭惟鞠养岂敢毁伤女慕贞洁男效才良知过必改得能莫忘罔谈彼短靡恃己长信使可覆器欲难量墨悲丝染诗赞羔羊景行维贤克念作圣德建名立形端表正空谷传声虚堂习听祸因恶积福缘善庆尺璧非宝寸阴是竞资父事君曰严与敬孝当竭力忠则尽命临深履薄夙兴温凊似兰斯馨如松之盛川流不息渊澄取映容止若思言辞安定笃初诚美慎终宜令荣业所基籍甚无竟学优登仕摄职从政存以甘棠去而益咏乐殊贵贱礼别尊卑上和下睦夫唱妇随外受傅训入奉母仪诸姑伯叔犹子比儿孔怀兄弟同气连枝'
for(var i=0;i<1000;i++){
    var obj = {}
    var firstname = str[parseInt(str.length * Math.random())]
    var secondname = str1[parseInt(str1.length * Math.random())]
    var thirdname = str2[parseInt(str2.length * Math.random())]
    obj.name = firstname + secondname + thirdname
    obj.age = parseInt(Math.random() * 60) + 20
    obj.sex = '男女'[parseInt(2 * Math.random())]
    obj.id = i
    arr.push(obj)
}
console.log(arr);
/*
截取数据并显示
1       0   10
2       10  20
3       20  30
*/
var pageSize = 10
var p = new Page('container', {
    pageData: {
        total: arr.length,
        pageSize
    },
    show: function(currentPage){
        // 截取数据
        // console.log(currentPage);
        var data = arr.slice((currentPage-1)*pageSize, currentPage * pageSize)
        // console.log(data);
        // 渲染数据
        var str = ''
        data.forEach((item, index) => {
            str += `
                <tr>
                    <td>${index+1}</td>
                    <td>${item.name}</td>
                    <td>${item.age}</td>
                    <td>${item.sex}</td>
                    <td>删除</td>
                </tr>
            `
        })
        document.querySelector('tbody').innerHTML = str
    }
})
</script>
</html>

// 使用面向对象来做分页插件
// 因为有实参，需要形参接收 - 希望后面的对象参数是可选项 - 希望别人如果有数据就直接使用，如果没有数据，也可以进行效果的展示
function Page(classname, options = {}){
    // 获取容器
    this.container = document.querySelector('.'+classname);
    // 创建分页盒子
    this.box = document.createElement('div')
    // 设置样式
    this.setStyle(this.box, {
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center'
    })
    // 不允许选中其中的文字
    this.box.onselectstart = function(){ // 选中文字就会触发这个事件
        // console.log(this);
        return false // 阻止默认行为
    }
    // 鼠标移入鼠标变成手指状态
    this.box.onmouseover = () => this.box.style.cursor = 'pointer'
    // 将分页盒子放在容器中
    this.container.appendChild(this.box)
    // 创建小div需要参数的替换
    // 将形参options当做当前对象的属性
    this.options = options
    // 给对象添加一个属性 - 每次点击后要执行的函数
    this.show = options.show || function(){}
    // 定义自己的参数 - 对象的属性
    this.myOptions = {
        language: {
            first: '首页',
            prev: '上一页',
            pageList: '', // 添加一个键值对 - 在上一页和下一页之间多创建一个放页码的div
            next: '下一页',
            last: '末页'
        },
        pageData: {
            total: 1000,
            pageSize: 10
        }
    }
    // 替换参数的方法
    this.setDefault()
    // 定义一个对象属性 - 的值是用来放页码的div
    this.pageList = null
    // 定义当前页默认为1
    this.currentPage = 1
    // 遍历自己的参数创建小div
    this.createDiv()
    // 创建页码
    // 计算总页数 - 用自己的参数去计算
    this.totalPage = Math.ceil(this.myOptions.pageData.total / this.myOptions.pageData.pageSize)
    // 创建页码
    this.setPage()
    // 点击切换当前页
    this.click()
    // 设置禁用项
    this.setDisabled()
    // 创建输入框和按钮
    this.createInput()
    // 执行一次show函数
    this.show(this.currentPage)
}
// 创建输入框和按钮的方法
Page.prototype.createInput = function(){
    // 创建输入框放在box中
    var input = document.createElement('input')
    this.box.appendChild(input)
    // 设置样式
    this.setStyle(input, {
        width: '50px',
        height: '28px',
        marginLeft: '5px',
        paddingLeft: '6px',
        outline: 'none'
    })
    // 创建button按钮添加到box
    var btn = document.createElement('button')
    btn.innerText = 'GO'
    this.box.appendChild(btn)
    // 设置样式
    this.setStyle(btn, {
        width: '50px',
        height: '34px',
        marginLeft: '10px',
        outline: 'none',
        border: 'none',
        border: '1px solid #000',
        backgroundColor: '#0f0',
        borderRadius: '5px',
        cursor: 'pointer'
    })
}
// 设置禁用项的方法
Page.prototype.setDisabled = function(){
    // 判断当前页是否是1
    if(this.currentPage === 1){
        // 首页和上一页是禁用状态
        // 设置禁用的背景颜色
        this.box.children[0].style.backgroundColor = '#ccc'
        this.box.children[1].style.backgroundColor = '#ccc'
        // 给当前标签添加不同的属性，判断是否禁用
        this.box.children[0].setAttribute('disabled', true)
    }else{
        this.box.children[0].style.backgroundColor = 'transparent'
        this.box.children[1].style.backgroundColor = 'transparent'
        // 给当前标签添加不同的属性，判断是否禁用
        this.box.children[0].setAttribute('disabled', false)
    }

    if(this.currentPage === this.totalPage){
        // 首页和上一页是禁用状态
        // 设置禁用的背景颜色
        this.box.children[3].style.backgroundColor = '#ccc'
        this.box.children[4].style.backgroundColor = '#ccc'
    }else{
        this.box.children[3].style.backgroundColor = 'transparent'
        this.box.children[4].style.backgroundColor = 'transparent'
    }
}
// 点击切换当前页的方法
Page.prototype.click = function(){
    // 利用事件委托给每一个子标签处理点击事件
    this.box.onclick = () => {
        // 获取精准的目标元素
        var target = window.event.target;
        // 判断当前目标元素是哪一个
        // 添加条件，当前点击的标签是否是可用状态
        if(target.className === 'first' && target.getAttribute('disabled') != 'true'){ // 点击的是首页
            this.currentPage = 1
            this.setPage()
            this.setDisabled()
            this.show(this.currentPage)
        }else if(target.className === 'prev' && this.currentPage != 1){ // 点击的是上一页
            this.currentPage--
            // 判断最小值
            if(this.currentPage < 1){
                this.currentPage = 1
            }
            this.setPage()
            this.setDisabled()
            this.show(this.currentPage)
        }else if(target.className === 'next' && this.currentPage != this.totalPage){ // 点击的是下一页
            this.currentPage++
            // 判断最小值
            if(this.currentPage > this.totalPage){
                this.currentPage = this.totalPage
            }
            this.setPage()
            this.setDisabled()
            this.show(this.currentPage)
        }else if(target.className === 'last' && this.currentPage != this.totalPage){ // 点击的是末页
            this.currentPage = this.totalPage
            this.setPage()
            this.setDisabled()
            this.show(this.currentPage)
        }else if(target.tagName === 'P' && this.currentPage != +target.innerText){ // 点击的是页码
            this.currentPage = +target.innerText
            // console.log(this.currentPage);
            this.setPage()
            this.setDisabled()
            this.show(this.currentPage)
        }else if(target.tagName === 'BUTTON' && +target.previousElementSibling.value != this.currentPage){
            // 判断文本框中的数字的最大值和最小值
            if(+target.previousElementSibling.value < 1){
                target.previousElementSibling.value = 1
            }
            if(+target.previousElementSibling.value > this.totalPage){
                target.previousElementSibling.value = this.totalPage
            }
            this.currentPage = +target.previousElementSibling.value
            this.setPage()
            this.setDisabled()
            this.show(this.currentPage)
        }
    }
}
// 创建页码的方法
Page.prototype.setPage = function(){
    // 先清空所有的页码
    this.pageList.innerHTML = ''
    // 判断总页数是否大于5
    if(this.totalPage > 5){
        // 判断当前页<=3 - 12345
        if(this.currentPage <= 3){
            this.createP(1, 5)
        }
        // 当前页>=总页数-2  -   最后5个页码
        else if(this.currentPage >= this.totalPage - 2){
            this.createP(this.totalPage-4, this.totalPage)
        }
        // 其余情况 - 当前页-2~当前页+2
        else{
            this.createP(this.currentPage-2, this.currentPage+2)
        }
    }else{
        this.createP(1, this.totalPage)
        // 遍历1~总页数
    }
}
// 创建p标签的方法
Page.prototype.createP = function(start, end){
    for(var i=start;i<=end;i++){
        // 创建页码
        var p = document.createElement('p')
        // 放上页码文字
        p.innerText = i
        // 将页面显示在页面中
        // console.log(this.pageList);
        this.pageList.appendChild(p)
        // 给p标签设置样式
        this.setStyle(p, {
            padding: '5px',
            margin: '5px',
            border: '1px solid #000'
        })
        // 判断是否是当前页
        if(i === this.currentPage){
            p.style.backgroundColor = 'yellow'
        }
    }
}
// 创建小div的方法
Page.prototype.createDiv = function(){
    // 遍历自己的参数
    for(var key in this.myOptions.language){
        // 创建小div
        var div = document.createElement('div')
        // 设置样式
        // 将放页码和div排除掉
        if(key != 'pageList'){
            this.setStyle(div, {
                padding: '5px',
                margin: '5px',
                border: '1px solid #000'
            })
        }else{
            this.pageList = div
            this.setStyle(div, {
                display: 'flex',
                justifyContent: 'center'
            })
        }
        // 给每个div加类型
        div.className = key
        // 设置内容
        div.innerText = this.myOptions.language[key]
        // 放在分页盒子中
        this.box.appendChild(div)
    }
}
// 定义参数替换的方法
Page.prototype.setDefault = function(){
    // 替换language
    for(var key in this.options.language){
        this.myOptions.language[key] = this.options.language[key]
    }
    // 替换分页数据
    for(var key in this.options.pageData){
        this.myOptions.pageData[key] = this.options.pageData[key]
    }
}
// 设置样式的方法
Page.prototype.setStyle = function(ele, styleObj){
    for(var key in styleObj){
        ele.style[key] = styleObj[key]
    }
}