table pagination javascript

Table Pagination with Javascript

Pagination is very important when it comes to displaying huge data in a table. It helps to make the table easy to read and navigate. In this blog post, we will discuss how to implement table pagination with Javascript.

Step 1: HTML Table

We need an HTML table to display data. We will create a sample table with 10 rows and 3 columns.

<table id="myTable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Country</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>25</td>
      <td>USA</td>
    </tr>
    <tr>
      <td>Mike</td>
      <td>30</td>
      <td>Canada</td>
    </tr>
    ...
  </tbody>
</table>

Step 2: Javascript Code

We will use Javascript to implement table pagination. We will create a function called paginate() that will handle the pagination logic.

function paginate(pageNum){
  var rowsPerPage = 5; // number of rows to show per page
  var myTable = document.getElementById("myTable");
  var rows = myTable.getElementsByTagName("tr");
  var totalPages = Math.ceil((rows.length-1) / rowsPerPage); // -1 to exclude the table header row
  var startIndex = (pageNum - 1) * rowsPerPage + 1;
  var endIndex = startIndex + rowsPerPage - 1;
  
  if(endIndex > rows.length) endIndex = rows.length-1; // adjust endIndex if it exceeds the number of rows
  
  // loop through all the rows and hide/show them based on the page number
  for(var i=1; i= startIndex && i <= endIndex){
      rows[i].style.display = "table-row";
    } else {
      rows[i].style.display = "none";
    }
  }
  
  // display the pagination links
  var paginationLinks = "";
  for(var i=1; i<=totalPages; i++){
    if(i == pageNum){
      paginationLinks += "<span>" + i + "</span>";
    } else {
      paginationLinks += "<a href='javascript:paginate(" + i + ")'>" + i + "</a>";
    }
  }
  document.getElementById("pagination").innerHTML = paginationLinks;
}

Step 3: Pagination Links

We need to display the pagination links somewhere in the HTML. We will create a div with an id of "pagination" where we will display the links.

<div id="pagination"></div>

Step 4: Testing

Now we can test our pagination by calling the paginate() function with a page number as an argument. For example, to display the first page, we will call paginate(1).

<button onclick="paginate(1)">First Page</button>
<button onclick="paginate(2)">Second Page</button>
...

That's it! Now we have implemented table pagination with Javascript.