Question

您好，我需要使用 dynatable.js 生成完全动态表的帮助，也欢迎其他任何js建议。 还有其他一些 Jquery Tables

当前我正在使用php脚本调用API并将cURL响应保存到.Json文件中

从PHP调用API后， local.json 的示例如下

const express = require('express'); const expressLayouts = require('express-ejs-layouts'); const mongoose = require('mongoose'); const app = express(); // DB Config // url : mongodb+srv://rodrigo:<rodrigo>@recifeprev-xv52e.mongodb.net/test?retryWrites=true&w=majority const db = require('./config/keys').MongoURI; //Connect to mongo mongoose.connect(db, {useNewUrlParser: true, useUnifiedTopology:true}) .then(() => console.log('MongoDB Connected...')) .catch(err => console.log(err)); // EJS app.use(expressLayouts); app.set('view engine', 'ejs'); // Routes app.use('/' , require('./routes/index')); app.use('/users' , require('./routes/users')); const PORT = process.env.PORT || 27017; app.listen(PORT, console.log(`Server started on port ${PORT}`));

现在，我想将此数据用于格式良好的表格中，以便进行搜索和分页，因此我发现可动态很有用，但我正在转换完全动态表很困难，因为每次数据更改或将新列添加到json数据中时，我都需要提及表头

[ { "adapterid": 44835, "rowid": 1573784208932, "battery": 3610, "createddate": "15-11-2019", "gid": "01:f0:50:11:a1:35:87", "id": 2277491836402479600, "projectid": 32107, "rssi": -90, "temp": 25.75 }, { "adapterid": 44835, "rowid": 1573784212032, "battery": 3660, "createddate": "15-11-2019", "gid": "01:f0:50:11:a1:35:87", "id": 2277491836402479600, "projectid": 32107, "rssi": -89, "temp": 25.75 }, { "adapterid": 44835, "rowid": 1573784215034, "battery": 3610, "createddate": "15-11-2019", "gid": "01:f0:50:11:a1:35:87", "id": 2277491836402479600, "projectid": 32107, "rssi": -96, "temp": 25.75 } ]

我的完整页面代码可生成可测动力。它对我有用，但是我不想自己创建元素，我想让代码为我做到这一点并生成可动态化的

<thead> <th>adapterid</th> <th>rowid</th> <th>battery</th> <th>createddate</th> <th>gid</th> <th>id</th> <th>projectid</th> <th>rssi</th> <th>temp</th> </thead>

有人可以帮助我通过搜索和分页生成完全动态的表

Answer 1

您可以使用 Zinggrid。它非常易于使用，其文档也很简单。要从 JSON 生成表，您可以使用 zing-grid 标签。

<html>
<head>
  <script src="https://cdn.zinggrid.com/zinggrid.min.js" defer></script>
</head>
<body>
<zing-grid caption="Sample Table"
    data=[
  {
    "adapterid": 44835,
    "rowid": 1573784208932,
    "battery": 3610,
    "createddate": "15-11-2019",
    "gid": "01:f0:50:11:a1:35:87",
    "id": 2277491836402479600,
    "projectid": 32107,
    "rssi": -90,
    "temp": 25.75
  },
  {
    "adapterid": 44835,
    "rowid": 1573784212032,
    "battery": 3660,
    "createddate": "15-11-2019",
    "gid": "01:f0:50:11:a1:35:87",
    "id": 2277491836402479600,
    "projectid": 32107,
    "rssi": -89,
    "temp": 25.75
  },
  {
    "adapterid": 44835,
    "rowid": 1573784215034,
    "battery": 3610,
    "createddate": "15-11-2019",
    "gid": "01:f0:50:11:a1:35:87",
    "id": 2277491836402479600,
    "projectid": 32107,
    "rssi": -96,
    "temp": 25.75
  }
]>
</zing-grid>
</body>
</html>

应该可以。至于 search 和 pagination，它包含在网站中。

动态JS从json数据动态生成表

1 个答案: