2

您好，我在使用dynatable.js或任何其他 js 建议生成完全动态表方面需要帮助。 这是其他一些 Jquery 表

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

下面是从 PHP 调用 API 后的local.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
  }
]

现在我想将这些数据用于允许搜索和分页的格式良好的表格，所以我发现dynatable很有用，但我很难转换完全动态的表格，因为每次数据更改或新列添加到 json 时我都需要提及表格标题数据

<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>

我的整页代码生成可动态化的。它对我有用，但我不想自己创建元素我希望代码为我做这件事并生成可动态的

<html>
<head>
<title>Dynatable Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://cdn.rawgit.com/alfajango/jquery-dynatable/master/jquery.dynatable.css" rel="stylesheet"/>
<script src="https://cdn.rawgit.com/alfajango/jquery-dynatable/master/jquery.dynatable.js"></script>
</head>


<body id="page-top" >   

<table id="my-table" class="table dataTable my-0">
<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>
<tbody>
</tbody>
</table>


<script>
$.getJSON('local.json', function (response) {     
  $('#my-table').dynatable({
  dataset: {
    records: response
  },
});
});
</script>


</body>
</html>

有人可以帮我用搜索和分页生成完全动态的表格吗

4

1 回答 1

0

您可以使用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>

这应该做。至于搜索和分页，它包含在网站中。

于 2021-04-19T20:09:50.900 回答