JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/json2/20150503/json2.js"></script>
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css">
<table id ="MeterDataTable" class="display" cellspacing="0" width="100%" >
<thead>
<tr>
<th>meter</th>
<th>id</th>
<th>desc</th>
</tr>
</thead>
<tfoot>
<tr>
<th>meter</th>
<th>id</th>
<th>desc</th>
</tr>
</tfoot>
</table>
JavaScript
var dataset ;
function meterData() {
$.ajax({
type: "POST",
url: "http://cors.io/?u=http://alltvrepairs.com/logs/testJson.txt",
//url: "jSonServices.asmx/getAllMeters",
contentType: "application/json; charset=utf-8",
dataType: "json",
async: false,
cache: false,
timeout: 10000,
timeout: 10000,
success: function (msg) {
if ((msg).length < 5)
alert("No data Found!");
else {
//dataset = [{ "meter": "test", "id": 15, "desc": "testDesc"}];
// !important! Parse msg.d string into object
alert(msg);
var obj = JSON.parse(msg.d);
$('#MeterDataTable').DataTable(
{
"aaData": obj,
"aoColumns": [
{ "mData": "meter" },
{ "mData": "id" },
{ "mData": "desc" }
]
}
);
}
},
error: function (e) {
alert("not ok" + e.responseText);
}
});
}
$(document).ready(function () {
meterData();
});