CODEWITHSUNDEEP
javascriptphpjqueryjsondynatable
harsh suthar
harsh suthar

Reputation: 83

dynatable JS to generate table from json data dynamically

Hello i need help in generating fully dynamic table using dynatable.js or any other js suggestions welcome as well. here are some other Jquery Tables

currently i am using php script to call API and save cURL response into .Json file

sample of local.json is below after calling API from PHP

[
  {
    "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
  }
]

now i want to use this data into well formed table which allow to search and pagination so i found dynatable useful but i am having difficulties to convert fully dynamic table because i need to mention table header every time when data change or new column added into json data

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

My full page code to generate dynatable. it's working for me but i don't want to create th element by myself i want code to do that for me and generate dynatable 

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

can someone help me to generate fully dynamic table with search and pagination

Upvotes: 2

Views: 1281

Answers (1)

user11339814
user11339814

Reputation:

You can use Zinggrid. It's pretty easy to use and their documentation is straightforward. To generate the table from JSON, you can use the zing-grid tag.

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

This should do. As for search and pagination, it's included in the website.

Upvotes: 0

Related Questions