时间戳

首页 > 解决方案 > 显示表格结果信息的功能

javascript - 显示表格结果信息的功能

问题描述

我想要我的功能做什么：

在第一页“显示 11 条结果中的 1 到 7 条”

第二页“显示 7 到 11 个结果，共 11 个结果”

等等

我有的变量：

page - 你在哪一页 (1,2,3...)

records_per_page - 每页显示多少个结果 (7)

objJson.length - 有多少个结果

numPages() - 计算页数

我当前的功能显示：

第一页上的结果 - “显示 11 中的 1 到 7”

第二页上的结果 - “显示 2 到 14 个，共 11 个”

let changePage = function(page) {
               const listingTable = document.getElementById('listingTable');
     
               if (page < 1) {
                   page = 1;
               } 
               if (page > (numPages() -1)) {
                   page = numPages();
               }

               listingTable.innerHTML = "";

     
               for(let i = (page -1) * records_per_page; i < (page * records_per_page) && i < objJson.length; i++) {
                    let dataTable = document.getElementById("dataTable_info")
                    .innerHTML = `Showing ${page} to ${(page) * records_per_page} of ${objJson.length}`;
                    console.log(i)
                    

                    const tr = document.createElement("tr");

                   const content = `
                   <td>${objJson[i]._id}</td>
                   <td>${objJson[i].firstName}</td>
                   <td>${objJson[i].email}</td>
                   <td>${objJson[i].role}</td>
                   <td>${objJson[i].createdAt.slice(0, 10)}</td>
                   <td>${objJson[i].updatedAt.slice(0, 10)}</td>`;
                   
                   tr.innerHTML = content;
                   listingTable.appendChild(tr);
               }
               checkButtonOpacity();
               selectedPage();
               
           }

标签： javascriptdomhtml-table

解决方案

你可以使用这个逻辑。

function f(currentPage, totalPage) {
    const pageCount = 1;
    let pages = '',
        firstVisiblePage = currentPage <= pageCount ? 1 : currentPage - pageCount,
        lastVisiblePage = totalPage - currentPage <= pageCount ? totalPage : currentPage + pageCount;

    if (firstVisiblePage > 1) {
        pages += `<li><a href="#" data-page="1">1</a>`;
        pages += `<li><a href="#">...</a>`;
    }

    for (let i = firstVisiblePage; i <= lastVisiblePage; i++) {
        const page = i,
            className = currentPage === page ? "current" : "";

        pages += `<li><a class="${className}" href="#" data-page="${page}">${page}</a>`;
    }

    if (totalPage - currentPage > pageCount) {
        pages += `<li><a href="#">...</a>`;
    }

    if (lastVisiblePage < totalPage) {
        pages += `<li><a href="#" data-page="${totalPage}">${totalPage}</a>`
    }

    const nextPage = currentPage < totalPage ? currentPage + 1 : -1;
    const prevPage = currentPage > 1 ? currentPage - 1 : -1;

    return `
        <nav data-pagination>
            <a id="prevPage" class="btn-page-control" href="#" data-page="${prevPage}"><i class=ion-chevron-left>&laquo;</i></a>
            <ul class="pages-ul">
                ${pages}
            </ul>
            <a id="nextPage" class="btn-page-control" href="#" data-page="${nextPage}"><i class=ion-chevron-right>&raquo;</i></a>
        </nav>`;
}

推荐阅读