javascript - 使用 ejs 模板和 MYSQL 在节点 js 中的服务器端分页
问题描述
因为我必须渲染大数据,当我进行客户端分页时,这需要时间,我知道服务器端分页最适合
- 大型数据集
- 更快的初始页面加载
但我不知道如何使用 NODE.JS EJS 和 MYSQL 进行服务器端分页,这是我的 Routes 和.EJS
路线
app.get('/',function(req,res,next){
req.getConnection(function(error, conn) {
let sql = `SELECT *FROM studiestable
WHERE ReceivingDate >= ( CURDATE() - INTERVAL 35 DAY )
ORDER BY Bckup DESC,
ReceivingDate DESC`;
conn.query(sql,function(err,rows,fields){
if (err) {
req.flash('error', err)
res.render('patient/dashboard', {
title: 'Dashboard',
data: ''
})
} else {
res.render('patient/dashboard', {
title: 'Dashboard',
data: rows
})
}
})
})
})
EJS
<table id="pattTab" class="table small">
<tr style="background-color: rgb(122, 135, 160);color: white">
<th>ID</th>
<th>Patient Name</th>
<th>Age</th>
<th>Modality</th>
<th>Images</th>
</tr>
<% if (data) { %>
<% data.forEach(function(Patient){ %>
<tr>
<td><%= Patient.PatientID %></td>
<td><%= Patient.PatientName %></td>
<td><%= Patient.Age %></td>
<td><%= Patient.Modality %></td>
<td><%= Patient.Images %></td>
</tr>
<% }) %>
<% } %>
</table>
解决方案
使用 Mongoose ODM 在 NodeJS、EJS 和 MongoDB 中进行分页
如果您尝试进行分页,请按以下方式进行。你的 Node.JS 文件
const ITEMS_PER_PAGE = 4;
exports.getIndex = (req, res, next) => {
// start constants
const page = +req.query.page || 1; // pagination
let totalItems; // pagination
// end constants
Hotel.find()
.countDocuments()
.then(numberOfProducts => {
totalItems = numberOfProducts;
return Hotel.find()
.skip((page-1) * ITEMS_PER_PAGE)
.limit(ITEMS_PER_PAGE);
}).then(hotels => {
res.render('pages/hotel', {
hotels: hotels,
currentPage: page,
hasNextPage: (ITEMS_PER_PAGE * page) < totalItems,
hasPreviousPage: page > 1,
nextPage: page + 1,
previousPage: page - 1,
lastPage: Math.ceil(totalItems / ITEMS_PER_PAGE)
});
}).catch(err => {
console.log(err);
});
}
然后按以下方式编写您的 ejs:
<body>
<div class="jumbotron">
<div class="container">
<h1 class="display-4">Hotels</h1>
</div>
</div>
<div class="container">
<%if (hotels.length > 0) {%>
<div class="row">
<%for (let hotel of hotels) {%>
<div class="col-sm-4">
<div class="card mt-4" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title mt-2"><%=hotel.title%></h5>
<p class="card-text"><%=hotel.description%></p>
</div>
</div>
</div>
<%}%>
<div class="container mt-4">
<nav aria-label="Page navigation example">
<ul class="pagination justify-content-center">
<% if (hasPreviousPage) { %>
<li class="page-item">
<a class="page-link" href="?page=1">First</a>
</li>
<li class="page-item">
<a class="page-link" href="?page=<%= previousPage %>"><%= previousPage %></a>
</li>
<% } %>
<li class="page-item active">
<a class="page-link" href="?page=<%= currentPage %>"><%= currentPage %></a>
</li>
<% if (hasNextPage) { %>
<li class="page-item">
<a class="page-link" href="?page=<%= nextPage %>"><%= nextPage %></a>
</li>
<li class="page-item">
<a class="page-link" href="?page=<%= lastPage %>">Last</a>
</li>
<% } %>
</ul>
</nav>
</div>
</div>
<%} else {%>
<div class="text-center">
<h5>No products found.</h5>
<div class="mt-4">
<a href="/" class="btn btn-outline-primary">Go Home</a>
</div>
</div>
<%}%>
</div>
</body>
已将引导程序用于 CSS。
这就是你可以做到的。它将从数据库中获取一些项目并对 UI 进行分页。
推荐阅读
- sql - 有效地在几个表中找到最后日期 - Teradata SQL
- c# - 下载 FTP 存档
- angular - 如何以编程方式选择或设置焦点到 AG Grid 中的特定行?
- macos - 配置脚本在 mac 上找不到 libxml2
- javascript - React TypeError:无法读取未定义的属性“长度”
- maven - 谁在我的构建中配置所有这些 Maven 存储库?
- android - 在 kotlin 和 Android 中以 MVVM 模式保持应用程序状态的正确方法
- android - 是否可以识别附近禁用蓝牙的安卓设备?
- javascript - 如何在我的网站上实施 Google SameSite cookie?
- java - java.lang.VerifyError 尝试运行时预期的精确参考 Blocking Kotlin 在 Android 中暂停乐趣