Таблица обновлений html EJS + Nodejs + Expressjs - PullRequest
Новая
       6

Таблица обновлений html EJS + Nodejs + Expressjs

0 голосов
/ 09 марта 2019

У меня есть приложение nodejs + expressjs + ejs.

Я создаю экран поиска по истории, мой вопрос состоит в том, как обновить мою HTML-таблицу ejs значениями, возвращенными в ответе.

Загрузка экрана со значениями работает, но когда я вхожу в фильтры и выполняю поиск, мне бы хотелось обновить свою таблицу.

В приведенном ниже примере показано, как использовать для первой загрузки 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});

    }
});

1 Ответ

0 голосов
/ 10 марта 2019

EJS статичен после компиляции, вы не можете изменить его на стороне сервера. Есть два пути этого.

  1. Обновление страницы каждый раз, когда вы хотите визуализировать новый контент.
  2. Реализация JS-кода на стороне клиента, который будет обрабатывать запросы API и отображать новые элементы.

Например, используя 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)

};
...