I have the following code I search all over the internet can't find an example of how to make the pagination work.I want to achive 10 row in a page when there are more pagination to increment and to work when I click next or previos or some page from the pagination menu.I am not front end developer or javascript develeoper so I need help.Thank you for the help.
<div class="card card-body border-0 shadow table-wrapper table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th class="border-gray-200">Iteam</th>
<th class="border-gray-200">Date</th>
<th class="border-gray-200">Date Time</th>
<th class="border-gray-200">Data</th>
<th class="border-gray-200">Status</th>
</tr>
</thead>
<tbody>
<!-- Item -->
<tr>
<td>
<a href="#" class="fw-bold">
Data
</a>
</td>
<td>
<span class="fw-normal">Data</span>
</td>
<td><span class="fw-normal">Data</span></td>
<td><span class="fw-normal">Date</span></td>
<td><span class="fw-bold text-warning">Due</span></td>
</tr>
<!-- Item -->
</tbody>
</table>
<div class="card-footer px-3 border-0 d-flex flex-column flex-lg-row align-items-center justify-content-between">
<nav aria-label="Page navigation example">
<ul id="list_id" class="pagination mb-0">
<li class="page-item">
<a class="page-link" href="#">Previous</a>
</li>
<li class="page-item">
<a class="page-link" href="#">1</a>
</li>
<li class="page-item active">
<a class="page-link" href="#">2</a>
</li>
<li class="page-item">
<a class="page-link" href="#">3</a>
</li>
<li class="page-item">
<a class="page-link" href="#">4</a>
</li>
<li class="page-item">
<a class="page-link" href="#">5</a>
</li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>
<div class="fw-normal small mt-4 mt-lg-0">Showing <b>5</b> out of <b>25</b> entries</div>
</div>
</div>