顯示文章
1
網頁技術 / jQuery data table無法呈現?
« 於: 2016-06-24 17:26 »
我想要將curl的資料以jquery datatable呈現 (like this https://datatables.net/examples/api/row_details.html),
response.php :
datatables.php:
response.php :
代碼: [選擇]
echo json_encode($results);
datatables.php:
代碼: [選擇]
<script>
function format ( d ) {
// `d` is the original data object for the row
return '<table cellpadding="3" cellspacing="0" border="0" style="padding-left:50px;">'+
'<tr>'+
'<td>message:</td>'+
'<td>'+htmlspecialchars(d.message)+'</td>'+
'</tr>'+
'<tr>'+
'<td>id:</td>'+
'<td>'+d.id+'</td>'+
'</tr>'+
'</table>';
}
$(document).ready(function() {
var table = $('#example').DataTable( {
"ajax": {
'type': 'POST',
'url': 'response.php',
"columns": [
{
"className": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
},
{ "data": "datetime" },
{ "data": "message" },
],
"order": [[1, 'asc']]
} );
// Add event listener for opening and closing details
$('#example tbody').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = table.row( tr );
if ( row.child.isShown() ) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
}
else {
// Open this row
row.child( format(row.data()) ).show();
tr.addClass('shown');
}
} );
} );
</script>
html :代碼: [選擇]
<body>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th></th>
<th>datetime</th>
<th>message</th>
</tr>
</thead>
<tfoot>
<tr>
<th></th>
<th>datetime</th>
<th>message</th>
</tr>
</tfoot>
</table>
</body>
echo json_encode($results) 是有資料的，但是為什麼會不能呈現出來?