Javascript table's pagination

Question

I'm trying to put pagination function into my table and taking this post "Simple pagination in javascript" for reference.

https://codepen.io/duongvu/pen/eewdPG?editors=1111

It's supposed to input the data from my array into the table's class. However it doesn't work in my case. It freezes and can not proceed when clicking on <next>

score 0 · Answer 1 · answered Dec 08 '17 at 10:53

0

Try this out @Duong Vu

for (var i = 0; i < records_per_page; i++)
 {
    col[i].innerText = content[i + (page-1) * records_per_page].number;
 }

answered Dec 08 '17 at 10:53

tuan.tran

1,781
15
21

hmmmm.. we need 2 talk. – Dương Vũ Dec 08 '17 at 17:44

score 0 · Answer 2 · answered Dec 08 '17 at 11:10

function changePage(page) {
  var btn_next = document.getElementById("btn_next");
  var btn_prev = document.getElementById("btn_prev");
  var col = document.getElementsByClassName("no");
  var colName = document.getElementsByClassName("name");
  var colDetails = document.getElementsByClassName("info");
  var page_span = document.getElementById("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++) {
    col[i % records_per_page].innerText = content[i] ? content[i].number : '';
    colName[i % records_per_page].innerText = content[i] ? content[i].name : '';
    colDetails[i % records_per_page].innerText = content[i] ? content[i].detail : '';
  }
}

You are printing only numbers thats why it was not printing any other result. And as you have only 4 rows, so you need to use col[i % records_per_page] to print inside the table data on page changes.

Here is updated codepen.

Javascript table's pagination

2 Answers2