1. 程式人生 > >使用原生JS實現表格數據的翻頁功能

使用原生JS實現表格數據的翻頁功能

ati 默認 分享 data for 全局 定義 部分 -a

使用原生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實現表格數據的翻頁功能