码迷,mamicode.com
首页 > Web开发 > 详细

使用原生JS实现表格数据的翻页功能

时间:2019-03-03 16:15:00      阅读:336      评论:0      收藏:0      [点我收藏+]

标签:tar   .com   部分   男女   info   mat   rev   http   document   

使用原生JS实现如下图所示表格数据的翻页功能:

 

技术图片

 

HTML代码:

<body>
    <div id="title">
        <h1>表格标题</h1>
    </div>
    <table id="table" border="1"></table>

    <div id="pagination">
        <button id="prev">《</button>
        <span id="pages"></span>
        <button id="next">》</button>
    </div>
</body>

简单处理一下样式,CSS代码:

     #pagination {
            text-align: center;
        }

        #table {
            width: 800px;
            margin: 50px auto;
        }

        #table th {
            height: 35px;
        }

        #title {
            text-align: center;
        }

        button {
            padding: 5px;
            box-shadow: 0 0 5px #000;
        }

 

JS部分:

第一步,数据生成,我是用mock.js随机生成的35条数据:

    let data = Mock.mock({
            "person|35": [{
                "name": @cname,
                "gender": /^[男女]$/,
                "age|18-22": 1,
                "phone": /^1[\d]{10}$/,
                "address": @province
            }]
        })

 

第二步,获取DOM元素:

        const table = document.getElementById(table);
        const prev = document.getElementById(prev);
        const next = document.getElementById(next);
        const pages = document.getElementById(pages);    

第三步,定义三个全局变量。

        //默认设定每页十人
        let num1 = 10;
        //定义一个变量保存每页真实应该展示的数量
        let num2;
        //默认展示第一页
        let page = 1;    

第四步,书写并调用渲染函数,用于渲染表格数据

        const render = function () {
            table.innerHTML =
                `<thead>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>电话</th>
            <th>地址</th>
        </thead>`;

            //判断当前选择的页码对应的人数
            if (data.person.length - num1 * (page - 1) >= 10) {
                num2 = 10;
            } else {
                num2 = data.person.length - num1 * (page - 1);
            }
       //渲染该页对应的数据
for (let i = num1 * (page - 1); i < num2 + num1 * (page - 1); i++) { table.innerHTML += `<tr> <th>${data.person[i].name}</th> <th>${data.person[i].gender}</th> <th>${data.person[i].age}</th> <th>${data.person[i].phone}</th> <th>${data.person[i].address}</th> </tr>`; } } render();

 

第五步,根据人数生成页码,将其封装成函数并调用

    const creatPages = function () {
            pages.innerHTML = ‘‘;
            for (let i = 0; i < Math.ceil(data.person.length / 10); i++) {
                pages.innerHTML += ` <button data-page="${i+1}">${i+1}</button>`
            }
    }
    creatPages();

第六步,绑定左右及页码翻页按钮点击事件。每次点击事件后都要调用渲染函数

        //绑定向前翻页事件
        prev.onclick = function () {
            if (page > 1) {
                page--;
                render();
            } else {
                alert(当前为第一页!)
            }
        }

        //绑定向后翻页事件
        next.onclick = function () {
            if (page < Math.ceil(data.person.length / 10)) {
                page++;
                render();
            } else {
                alert(当前为最后一页!)
            }
        }

        //绑定点击页码渲染相应的数据事件
        pages.addEventListener(click, function (e) {
            page = e.target.getAttribute(data-page);
            render();
        })

 

使用原生JS实现表格数据的翻页功能

标签:tar   .com   部分   男女   info   mat   rev   http   document   

原文地址:https://www.cnblogs.com/tengyijun/p/10465811.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!