Hello, I am relatively new to front-end development and currently undergoing training in a project involving HTML, CSS, and JavaScript. However, I seem to be facing an issue with the Table HTML element. I have created a table structure below:
| A header | Another header |
|---|---|
| First | row |
| Second | row |
The table header contains search inputs that are designed to filter through the data within the table. My goal is to display a maximum of 5 rows per page, but when using the search function, it displays all the search results.
<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>
I am seeking advice on how to implement pagination into my current table so that only 5 results are displayed per page. Any insights or suggestions would be greatly appreciated!