<li class="has_sub">
<a href="/users/pagination" class="waves-effect waves-primary"><i class="ti-menu-alt"></i><span> Pagination </span>
</a>
</li>

router.get('/pagination', (req,res) => {

let sql = "select * from tbl_products";
conn.query(sql,(err,result) => {
if(err) throw err;
var resultPerPage = 10;
const numOfResults = result.length;
const numberOfPages = Math.ceil(numOfResults / resultPerPage);
console.log(numberOfPages);
let page = req.query.page ? Number(req.query.page) : 1;


if(page > numberOfPages)
{
res.redirect('/users/pagination/?page='+encodeURIComponent(numberOfPages));
}
else if(page < 1){
res.redirect('/users/pagination/?page='+encodeURIComponent('1'));
}
var startingLimit = (page - 1) * resultPerPage;

var sql1 = 'select * from tbl_products LIMIT ' +startingLimit +',' +resultPerPage;
console.log(sql1);
conn.query(sql1,(err,result) => {
if(err) throw err;

let iterator = (page - 1) < 1 ? 1 : page - 1;
let endingLink = (iterator + 9) <= numberOfPages ? (iterator + 9) : page + (numberOfPages - page);
if(endingLink < (page + 1))
{
iterator -= (page + 1) - numberOfPages;
}
res.render('pagination-page',{title:'pagination Example',data:result,page,iterator,endingLink,numberOfPages});
});
// https://www.youtube.com/watch?v=bRRhjs2Dqc4

})

})

<%- include('header') %>

<style>
.success_message{
display:block;
}
.selectedlink{

border-color: blue;
}
</style>
<!-- ============================================================== -->
<!-- Start right Content here -->
<!-- ============================================================== -->
<div class="content-page">
<!-- Start content -->
<div class="content">
<div class="container-fluid">

<!-- Page-Title -->
<div class="row">
<div class="col-sm-12">
<div class="page-title-box">
<h4 class="page-title">Application Form</h4>
<ol class="breadcrumb float-right">

<li class="breadcrumb-item"><a href="#">Pages</a></li>
<li class="breadcrumb-item active">Dashboard</li>
</ol>
<div class="clearfix"></div>
</div>
</div>
</div>





<div class="row">
<div class="col-12">
<div class="card-box">
<h4 class="m-t-0 header-title"> User Details</h4>


<div class="row">

<% if (messages.error) { %>
<span id="message" class="alert alert-success"> <p class="alert alert-danger" style="color:red"><%- messages.error %></p> </span>
<% } %>
<% if (messages.success) { %>
<span id="message" class="alert alert-success"><p style="color:green"><%- messages.success %></p></span>
<% } %>



</div>






<div class="row">
<div class="col-12">
<div class="p-20">



<table class="table tabs-bordered">
<thead>
<th> ID</th>
<th> Product Name</th>
<th> Price</th>
<th> Category</th>
</thead>
<tbody>
<% data.forEach(entry => { %>
<tr>
<td> <%= entry.id%></td>
<td> <%= entry.product_name%></td>
<td> <%= entry.price%></td>
<td> <%= entry.category%></td>

</tr>
<% }) %>
</tbody>

</table>

<div class="break"></div>
<nav aria-label="Page navigation example">
<ul class="pagination">

<% if(page > 1){ %>
<li class="page-item"> <a class="page-link" href="/users/pagination/?page=<%=page-1%>"> Previous </a></li>
<% } %>
<% for(let i = iterator; i<= endingLink; i++){%>

<% if(i === page) { %>

<li class="page-item active"><a class="selectedlink page-link " href="/users/pagination/?page=<%=i%>"> <%= i %> </a></li>
<% continue; %>
<% } %>
<li class="page-item"><a class="selectedlink page-link" href="/users/pagination/?page=<%=i%>"> <%= i %> </a> </li>

<% } %>

<% if(page < numberOfPages) { %>
<li class="page-item"><a class="page-link" href="/users/pagination/?page=<%=page+1%>"> Next </a></li>
<% } %>
</ul>
</nav>



</div>
</div>

</div>
<!-- end row -->

</div> <!-- end card-box -->
</div><!-- end col -->
</div>
<!-- end row -->

</div>
<!-- end container -->
</div>
<!-- end content -->

<%- include('footer') %>

CREATE TABLE `tbl_products` (
`id` INT(10) NOT NULL AUTO_INCREMENT,
`product_name` VARCHAR(500) NOT NULL COLLATE 'utf8mb3_general_ci',
`price` VARCHAR(500) NOT NULL COLLATE 'utf8mb3_general_ci',
`category` VARCHAR(500) NOT NULL COLLATE 'utf8mb3_general_ci',
PRIMARY KEY (`id`)
);