时间戳

首页 > 解决方案 > 更新表 html EJS + Nodejs + Expressjs

node.js - 更新表 html EJS + Nodejs + Expressjs

问题描述

我有一个应用程序 nodejs + expressjs + ejs。

我正在构建一个历史搜索屏幕，我的问题是如何使用响应中返回的值更新我的 ejs html 表。

使用值上传屏幕正在工作，但是当我输入过滤器和搜索时，我想更新我的表。

在下面的示例中是如何使用第一次加载带有查询数据的html，我想填写一个初始和最终日期，然后点击搜索和更新html。

EJS HTML

<div class="row">
 <div class="col-md-2">
    <div class="form-group">
       <label for="dataPrimayID">Date Primary</label>
       <input type="text" class="form-control datepickerDefault" id="dataPrimayID" name="dataPrimary" maxlength="250">
    </div>
 </div>
 <div class="col-md-2">
    <div class="form-group">
       <label for="dataFinalID">Date Final</label>
       <input type="text" class="form-control datepickerDefault" id="dataFinalID" name="dataFinal" maxlength="250">
    </div>
 </div>

 <div class="col-md-2">
    <a id="btnSearch" class="btn btn-primary">Search</a>
 </div>
</div>

<div class="row">
 <div class="table-responsive col-md-12">
    <table id="dataTableHistoricoID" class="table table-striped" cellspacing="0" cellpadding="0">
       <thead>
          <tr>
             <th>Name</th>
             <th>LastName</th>
          </tr>
       </thead>
       <tbody>
       <% if(data.length > 0){ %>

          <% for ( var i = 0 ; i < data.length ; i++){ %>
          <tr>
             <td>
                <%= data[i].name%>
             </td>
             <td>
                <%= data[i].lastname%>
             </td>
          </tr>
          <% } %>

       <% } %>
     </tbody>
    </table>
 </div>
</div>

路由器

var express = require('express');
var router = express.Router();

var historyController  = require('../controllers/history-controller');

router.get('/find', historyController.findHistory);

module.exports = router;

控制器

db.query(sql, function (err, rows) {
    if (err) {

        var message = err.message;
        console.log(message);

        return res.status(500).send(message);

    }else {

        var data = rows;
        res.render('history/search-history', {data: data});

    }
});

标签： node.jsexpressejs

解决方案

EJS 编译后是静态的，你不能在后端更改它。有两种方法。

  1. 每次要呈现新内容时刷新页面。
  2. 实现将处理 api 请求并呈现新元素的客户端 JS 代码。

例如，使用 Jquery：

$.post(url, (result) => {
    let data = JSON.parse(result);
    let innerHTML = '';
    for (let item of data) {
        innerHTML += `<tr>
             <td>
                ${item.name}
             </td>
             <td>
                ${item.lastname}
             </td>
          </tr>`;
    }
    $('#dataTableHistoricoID tbody').html(innerHTML)

};

推荐阅读