使用 ejs 模板和 MYSQL 在节点 js 中的服务器端分页答案

【问题标题】：Server side pagination in node js using ejs Template and MYSQL使用 ejs 模板和 MYSQL 在节点 js 中的服务器端分页
【发布时间】：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 我在渲染我的表格后有多个事件，为此我必须在事件发生后一次又一次地渲染我的表格，当你有大量数据时，该数据表的性能不佳，请参见此处在stackoverflow.com/questions/50405711/…之前使用过数据表
你考虑过使用SQL的OFFSET和LIMIT吗？

标签： javascript mysql node.js express ejs

【解决方案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 查询以了解您需要多少页。然后只是渲染页面的问题，不幸的是我帮不上什么忙。