This might fast track you (or not!) but maybe it will help.
<section id="configuration">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Listing & Sales Performance</h4>
</div>
<div class="card-content">
<div class="table-responsive">
<table class="table table-striped staff-table">
<thead>
<tr>
<th>Name</th>
<th class="dt-right">Listings</th>
<th class="dt-right">Sales</th>
<th class="dt-right">%</th>
<th class="dt-right">Days on Market</th>
<th class="dt-right">Withdrawn</th>
<th class="dt-right">%</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
</div>
</section>
Thats my HTML
<script src="/app-assets/vendors/js/tables/datatable/datatables.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.staff-table').DataTable( {
"order": [[ 1, "desc" ]],
"info": false,
"bLengthChange": false,
"bFilter": false,
"iDisplayLength": 6,
"columnDefs": [{
targets: -1,
className: 'dt-right'
}],
"columns": [null,{"width": "100px"},{"width": "100px"},{"width": "80px"},{"width": "100px"},{"width": "100px"},{"width": "80px"}],
"ajax": '/GenTable?c=listing'
});
});
Thats the Scripts on the bottom of the same page.
/GenTable?c=listing
That my NetTalk function that generates the JSON.
st.SetValue('')
Access:MyFile.Open()
MyFile{PROP:SQL} = 'MyQuery'
LOOP
NEXT(MyFile)
IF ERRORCODE() ~= 0 THEN BREAK.
st.Append('["'&CLIP(Field1)&'","'&CLIP(Field2)&'","'&CLIP(Field3)&'","'&LEFT(FORMAT(Field4,@n$20))&'","'&LEFT(FORMAT(Field5,@n3))&'%"]',1,',')
.
st.Prepend('{{ "data":[')
st.Append(']}')
Thats a snippet of my NetWebPage that creates the JSON.