Here is my HTML
<table id="dt">
<thead>
<tr>
<th>make</th>
<th>model</th>
<th>serial</th>
<th>status</th>
<th>User</th>
<th>dept</th>
<th>location</th>
</thead>
<tbody>
</tbody>
<tfoot></tfoot>
</table>
And here is my JS
<script type="text/javascript" language="javascript" >
$(document).ready(function() {
$.post("json.php",function(data){
$('#dt').DataTable( {
"aaData": data,
"aoColumns": [
{"mDataProp": "make"},
{"mDataProp": "model"},
{"mDataProp": "serial"},
{"mDataProp": "status"},
{"mDataProp": "user"},
{"mDataProp": "dept"},
{"mDataProp": "location"}
]
});
});
} );
</script>
And here is json.php
$data = Array ();
$data[] = array("make" => "Hp", "model" => "jhbh", "serial" => "kjkhn", "status" => "active", "user" => "John Doe", "dept" => "Manufacturing Services", "location" => "Bindura");
$data[] = array("make" => "Dell", "model" => "Vostro", "serial" => "kjkhn", "status" => "active", "user" => "Percy Holdin", "dept" => "Manufacturing Services", "location" => "Kwekwe");
echo json_encode($data,JSON_PRETTY_PRINT);
I have made an edit to this question, because now I want to get dyanmic data.
Error:
DataTables warning: table id=dt - Requested unknown parameter 'make' for row 0, column 0. For more information about this error, please see http://datatables.net/tn/4
But I havent found anything useful from that help link
JSON format should be like this as in this example: https://datatables.net/examples/data_sources/ajax.html
{
"data": [
[
"Hp",
"jhbh",
"kjkhn",
"active",
"John Doe",
"Manufacturing Services",
"Bindura"
]
]
}
Example on how to format json like this in php(well, one way):
$data = (object) [
'data' => [[
'test',
'test',
'test'
]]
];
echo json_encode($data);
And live example: http://sandbox.onlinephpfunctions.com/code/632c288c6c743da25e49958c204a8d4e0a936b54
you JSON should only be:
[
{
"make":"Hp",
"model":"jhbh",
"serial":"kjkhn",
"status":"active",
"user":"John Doe",
"dept":"Manufacturing Services",
"location":"Bindura"
}
]
You data should like below:
{
"data": [
[
"Hp",
"jhbh",
"kjkhn",
"active",
"John Doe",
"Manufacturing Services",
"Bindura"
]
]
}
As others already mentionned in the comments, dataTables need a specific HTML-Structure of the table.
Look at the examples at the Docs: https://datatables.net/examples/basic_init/zero_configuration.html
Table should look like this:
<table id="example" class="display">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
EDIT: Maybe this requirement is outdated. Seems that dataTables can insert the tbody-tag on its own now
And the returned jsonData should have a structure like this https://datatables.net/examples/ajax/simple.html
{
"data": [
[
"Hp",
"jhbh",
"kjkhn",
"active",
"John Doe",
"Manufacturing Services",
"Bindura"
]
]
}
I was getting JSON from PHP:
echo json_encode($arr);
Array was missing some keys, like: 1,2,3,10,122... Because of missing keys, dataTable plugin won't display data inside table. So I changed code like so:
array_multisort($arr);
echo json_encode($arr);
after multisort, keys are reset, and there should not be any missing key.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.