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

使用原生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();
        })

 

posted @ 2019-03-03 15:20  _TENG  阅读(5609)  评论(0)  编辑  收藏  举报