pure javascript table row pagination

Question

I try to do pagination table but I want to reference table row to show 3 data per page

How Could i do

Fiddle: http://jsfiddle.net/578hmpv2/

This Code

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);
};

How can I change it to make it perfect? Sorry for my bad English, can't explain all what I need, hope you understand what I need!

Thanks !

Answer 1

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

add this in your changePage function

jsfiddle

Answer 2

I think this does what you want. I've tried to keep the code more or less structured how you wrote it, but I've changed a few things:

I've used onclick rather than a javascript scheme href because the stack overflow code editor didn't run the href.

I've used current_page rather than a hard-coded 1 in the onload function.

Other than that I think the comments explain the situation.

Note that I've had to add one to the loop and subtracted one when doing the page count to allow for the header row.

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>