使用 ejs 模板和 MYSQL 在节点 js 中的服务器端分页
Posted
技术标签:
【中文标题】使用 ejs 模板和 MYSQL 在节点 js 中的服务器端分页【英文标题】：Server side pagination in node js using ejs Template and MYSQL 【发布时间】：2019-05-02 12:07:15 【问题描述】：因为我必须渲染大数据，并且当我进行客户端分页时，这需要时间，我知道服务器端分页最适合
大型数据集 更快的初始页面加载但我不知道如何使用 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>
【问题讨论】：
Datatable 是服务器端分页的最佳选择。可能这个链接对你有用datatables.net/examples/data_sources/server_side 嗨，sadil，但我必须在没有数据表插件的情况下这样做，因为该插件不能很好地处理连续变化的数据 我没有得到continuous changing data的意思
sadil 我在渲染我的表格后有多个事件，为此我必须在事件发生后一次又一次地渲染我的表格，当你有大量数据时，该数据表的性能不佳，请参见此处在***.com/questions/50405711/…之前使用过数据表
你考虑过使用SQL的OFFSET和LIMIT吗？
【参考方案1】：
NodeJS、EJS 和 MongoDB 中的分页，使用 Mongoose ODM
如果您尝试进行分页，请按以下方式进行。你的 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而不是mongodb！【参考方案2】：您可能想尝试使用 SQL 的 LIMIT 和 OFFSET 进行分页。所以，你的 Node 的 SQL 字符串会是这样的：
`SELECT * FROM studiestable
WHERE ReceivingDate >= ( CURDATE() - INTERVAL 35 DAY )
ORDER BY Bckup DESC,
ReceivingDate DESC`
LIMIT 30 OFFSET $req.query.page*30;`
我知道，传递这样的变量 unsanitized 是非常不安全的，但只是给出一个粗略的想法。
因此，在这个中发生的情况是，您会收到一个名为 page 的查询字符串（示例 url：api.example.com/?page=0）。我们假设我们的页码从 0 开始。所以，当page 等于 0 时，它返回前 30 行（偏移量为 0）。然后当page 等于 1（30 偏移量）时，它返回接下来的 30 行。随着page 的增加，它会根据您的页面返回接下来的 30 组数据。
【讨论】：
谢谢，我知道在 sql 级别，但是我将如何在 ejs 中呈现它以及如何找到需要多少分页以及如何根据页面点击显示下 30 个数据，因为我还有其他页面在我的项目中，我将如何为我的表格寻呼机传递链接 我想您可以先尝试进行COUNT 查询以了解您需要多少页。然后只是渲染页面的问题，不幸的是我帮不上什么忙。以上是关于使用 ejs 模板和 MYSQL 在节点 js 中的服务器端分页的主要内容，如果未能解决你的问题，请参考以下文章
为啥我的 For 循环在 EJS 节点 js 中只返回一个值？
Node JS+Express：如何在 HTML(EJS) 中定义和使用 MySQL 数据？