Updata table html EJS + Nodejs + Expressjs

Question

I have an application nodejs + expressjs + ejs.

I am building a history search screen, my question is how to update my ejs html table with the values returned in the response.

Uploading the screen with the values is working, but when I enter the filters and search, I would like to update my table.

In the example below is how to use to load the html the first time with the data of the query, I would like to fill in an initial and final date and click on searching and updating the 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>

ROUTER

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

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

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

module.exports = router;

Controller

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});

    }
});

IchigoWalker · Accepted Answer · 2019-03-10 11:56:36Z

1

EJS is static after compiling, you can't change it on backend-side. There are two ways of it.

Refreshing the page every time you want to render new content.
Implement client-side JS code that will handle api requests and render new elements.

For example, using 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)

};

answered Mar 10, 2019 at 11:56

IchigoWalker

1558 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Updata table html EJS + Nodejs + Expressjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related