纯javascripttable行分页

Question

我尝试进行分页 table 但我想引用 table 行以每页显示 3 个数据

我该怎么办

此代码

var current_page = 1;
var records_per_page = 3;
var l = document.getElementById("listingTable").rows.length


function prevPage()
{
    if (current_page > 1) {
        current_page--;
        changePage(current_page);
    }
}

function nextPage()
{
    if (current_page < numPages()) {
        current_page++;
        changePage(current_page);
    }
}
    
function changePage(page)
{
    var btn_next = document.getElementById("btn_next");
    var btn_prev = document.getElementById("btn_prev");
    var listing_table = document.getElementById("listingTable");
    var page_span = document.getElementById("page");
 
    // Validate page
    if (page < 1) page = 1;
    if (page > numPages()) page = numPages();


    for (var i = (page-1) * records_per_page; i < (page * records_per_page) && i < l; i++) {
   
             listing_table.rows[i].style.display = ""              
    }
    
    page_span.innerHTML = page + "/" + numPages();

    if (page == 1) {
        btn_prev.style.visibility = "hidden";
    } else {
        btn_prev.style.visibility = "visible";
    }

    if (page == numPages()) {
        btn_next.style.visibility = "hidden";
    } else {
        btn_next.style.visibility = "visible";
    }
}

function numPages()
{
    return Math.ceil(l / records_per_page);
}

window.onload = function() {
    changePage(1);
};

我该如何修改才能使它更完美？对不起，我的英语不好，无法解释我所需要的一切，希望你明白我所需要的！

谢谢！

Answer 1

我认为这符合您的要求。我试图或多或少地保持代码的结构，但我改变了一些东西：

我使用了 onclick 而不是 javascript 方案 href，因为堆栈溢出代码编辑器没有运行 href。

我在 onload 函数中使用 current_page 而不是 hard-coded 1。

除此之外，我认为评论说明了情况。

请注意，我必须在循环中加一并在计算页数时减一以允许 header 行。

var current_page = 1;
var records_per_page = 3;
var l = document.getElementById("listingTable").rows.length

function prevPage()
{

    if (current_page > 1) {
        current_page--;
        changePage(current_page);
    }
}

function nextPage()
{
    if (current_page < numPages()) {
        current_page++;
        changePage(current_page);
    }
}
    
function changePage(page)
{
    var btn_next = document.getElementById("btn_next");
    var btn_prev = document.getElementById("btn_prev");
    var listing_table = document.getElementById("listingTable");
    var page_span = document.getElementById("page");
 
    // Validate page
    if (page < 1) page = 1;
    if (page > numPages()) page = numPages();

    [...listing_table.getElementsByTagName('tr')].forEach((tr)=>{
        tr.style.display='none'; // reset all to not display
    });
    listing_table.rows[0].style.display = ""; // display the title row

    for (var i = (page-1) * records_per_page + 1; i < (page * records_per_page) + 1; i++) {
        if (listing_table.rows[i]) {
            listing_table.rows[i].style.display = ""
        } else {
            continue;
        }
    }
    
    page_span.innerHTML = page + "/" + numPages();

    if (page == 1) {
        btn_prev.style.visibility = "hidden";
    } else {
        btn_prev.style.visibility = "visible";
    }

    if (page == numPages()) {
        btn_next.style.visibility = "hidden";
    } else {
        btn_next.style.visibility = "visible";
    }
}

function numPages()
{
    return Math.ceil((l - 1) / records_per_page);
}

window.onload = function() {
    changePage(current_page);
};

<table id="listingTable">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
  <tr>
    <td>Example</td>
    <td>Page 3</td>
    <td>UK</td>
  </tr>
</table>
<a onclick="prevPage()" href='#' id="btn_prev">Prev</a>
<a onclick="nextPage()" href='#' id="btn_next">Next</a>
page: <span id="page"></span>

Answer 2

for (var i = 0; i < l; i++) {
    listing_table.rows[i].style.display = "none"
  }

将此添加到您的 changePage 函数中

jsfiddle

纯javascripttable行分页

pure javascript table row pagination

javascript

pagination