时间戳

首页 > 解决方案 > 如何使用“Flat Json”-Bootstrap 5 Table 示例与 ejs + nodejs + expressjs

node.js - 如何使用“Flat Json”-Bootstrap 5 Table 示例与 ejs + nodejs + expressjs

问题描述

我想使用“Flat Json”-Bootstrap 5 Table 示例。[链接][1]

我将 expressjs 与 nodejs 和 ejs 一起使用。到目前为止我的代码：

```<link href="https://unpkg.com/bootstrap-table@1.18.1/dist/bootstrap-table.min.css" rel="stylesheet">
 <script src="https://unpkg.com/bootstrap-table@1.18.1/dist/bootstrap-table.min.js"></script>

<body>
    <h2>JOB DASHBOARD</h2>

    
<table id="table" data-toggle="table" data-flat="true" data-search="true" >
  <thead>
    <tr>
        <th data-field="" data-sortable="true">Order ID</th>
        <th data-field="" data-sortable="true">Liefertermin</th>
        <th data-field="" data-sortable="true">Fertigstellungstermin</th>
        <th data-field="" data-sortable="true">Keyline Nr</th>
    </tr>
  </thead>
  <tbody>
    <% var count = 0; %>
    <% orders.forEach((order)=>{  %>
        <tr data-index="<%= count %>">
            <td><%= order.order_id %></td>
            <td><%= order.due_at %> </td>
            <td><%= order.deliver_at %> </td>
            <td><%= order.keyline_obj.event.data.attributes.reference %> </td>
        </tr>
        <% count +=1; %>
    <% }) %>
  </tbody>
</table>
</body>
</html>```

我正在从我的 mongoDB 数据库中加载内容。变量“orders”是一个订单文档数组。目前数据正在加载，但搜索字段根本没有出现，所有样式都不起作用，尽管我已经加载了 bootsrap css 和 js。[1]：https ://examples.bootstrap-table.com/index.html?bootstrap5#welcomes/flat-json.html

标签： node.jsexpresshtml-tableejsbootstrap-5

解决方案

我认为问题在于已成功发送，但响应在 json 中，因为浏览器正在等待

您可以通过=>单击屏幕上的右键单击=>按检查=>网络=>单击页面文件=>然后选择响应来检查是否接收到数据

您将找到包含更新数据的 html 页面

  • 你可以像这样在获取 api 之后从你的 js 脚本中渲染它

await fetch(----your fetching code-----).then(res=>{
    document.open();
    res.text().then(function(text) {
    document.write(text)
        });
    })

推荐阅读