html table table pagination without jquery

Question

I'm new to the front-end and I'm currently training in a project HTML - CSS - javascript , I'm having an issue with Table HTML element, I created a table

A header	Another header
First	row
Second	row

and the header of the table is search-input that searches through the table data, and I'm trying to show a maximum of 5 rows (pagination) but when searching shows search results of all the data.

            <table id="userstable"  class="content-table">
          <thead>
            <tr>
              <th> <input type="text" class="search-input" placeholder="UserName"></th>
              <th> <input type="text" class="search-input" placeholder="Full Name"></th>
              <th> <input type="text" class="search-input" placeholder="Address"></th> 
              <th> <input type="text" class="search-input" placeholder="PhoneNum"></th> 
              <th> <input type="text" class="search-input" placeholder="Service"></th> 
              <th> <input type="text" class="search-input" placeholder="FUP"></th> 
              <th> <input type="text" class="search-input" placeholder="IP Address"></th> 
              <th> <input type="text" class="search-input" placeholder="Location"></th> 
          </thead>
          <tbody>
            <tr>
              <td>Ali</td>
              <td>Domenic</td>
              <td>Kobbeih</td>
              <td>+96170473654</td>
              <td>2M-4GB-230,000</td>
              <td>0</td>
              <td>192.324.422</td>
              <td>432.343,42.2342</td>
            </tr>

my question is how i can add pagination to my current table to show max of 5 results per page?

There is not enough information to suggest a solution. How is the table generated? Pagination is usually done on the server that generates the page or else on the client using JavaScript. Yet, if you simply want to hide rows of an html table that can be done with some simple css. — Yogi, Sep 30 '22 at 10:55
_"and the header of the table is search-input that searches through the table data"_ - and this searching happens how, exactly? — CBroe, Sep 30 '22 at 10:57
the table data will be generated from data in the database via MySQL adn PHP , but the records will be more than 2000 , and i don't want the 2000 record appear on the page — Mickeyy, Sep 30 '22 at 10:57
the table header (username , fullname) are used to search for the table and are not the main issue , i just need to paginate the table , without using the JQuery table — Mickeyy, Sep 30 '22 at 11:00

score 1 · Answer 1 · answered Sep 30 '22 at 11:12

You would want get the inner html of the table you are working with. Next you would want to edit the html so that for each "page", a new div is made. To show any specific page, you can edit the "visibility" css class. I would save each table page in a seperate variable in a array, so with each button click you could hide the previous page and make each next page visible.

let tableHtml = document.getElementById('pageOne').innerHtml;

tableHtml = /*your table html*/;

<tbody id="pageOne">
<!-- your rows content -->
</tbody>

html table table pagination without jquery

1 Answers1