{
"response": {
"metadata": {
"requestDateTime": "2022-06-21T18:21:31.505Z",
"responseDateTime": "2022-06-21T18:21:31.505Z",
"deprecated": false
},
"status": {
"success": true,
"code": "",
"description": "",
"help": ""
},
"results": {
"customerId": "948293",
"personas": [
{
"id": "CUST",
"description": "Customer"
}
],
"events": [
{
"id": 9482923,
"cause": {
"id": "881",
"description": "Tire went flat"
},
"unit": 0,
"location": {
"city": "San Fancisco",
"state": "CA"
},
"created": "2022-06-21T18:21:35.505Z",
"currentStage": {
"id": "DSFW",
"description": "Something is very wrong"
},
"accounting": {
"workCompleted": "2022-06-25T17:22:35.505Z",
"status": {
"id": "COST",
"description": "Costing"
},
"invoiced": "2022-06-25T17:22:35.505Z"
}
}
]
}
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.12.0/css/dataTables.bootstrap4.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.12.0/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.12.0/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
</br></br>
<table id="table_id" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Metadata</th>
<th>Results</th>
<th>Response</th>
</tr>
</thead>
<tbody>
<!-- data -->
</tbody>
</table>
</div>
</body>
<script type="text/javascript">
$(document).ready( function () {
$.ajax({
url : 'https://e3b36496-1168-4841-9ed2-9d44c93d1d4d.mock.pstmn.io/v2/agent-assist-profile/9047478154',
type : 'GET',
dataType : 'json',
success : function(response) {
var metadata = response;
console.log(metadata);
bindtoDatatable(metadata);
}
});
});
function bindtoDatatable(metadata) {
var table = $('#table_id').dataTable({
"bAutoWidth" : false,
"aaData" : metadata,
"columns" : [ {
"data" : metadata.requestDateTime
}, {
"data" : metadata.responseDateTime
} ]
})
}
</script>
</html>URL: https://e3b36496 - 1168 - 4841 - 9 - ed2 9 d44c93d1d4d.mock.pstmn.io/v2/agent profile/9047478154——协助我想显示完整的上述url响应数据到数据表。任何帮助都会很感激。提前感谢。
您只需要映射您的数据，参见https://datatables.net/examples/
这里有一个非常基本的例子
$(document).ready(function() {
var table = $('#table_id').dataTable({
ajax: function(x, reply) {
fetch('https://e3b36496-1168-4841-9ed2-9d44c93d1d4d.mock.pstmn.io/v2/agent-assist-profile/9047478154')
.then(response => response.json())
.then(data => map(x, reply, data));
},
columns: [{
data: 'Metadata'
},
{
data: 'Results'
},
{
data: 'Response'
}
]
})
function map(x, reply, data) {
return reply({
"data": [{
"Metadata": data.response.metadata.requestDateTime,
"Results": data.response.results.customerId,
"Response": data.response.status.success,
}]
})
}
});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.12.0/css/dataTables.bootstrap4.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.12.0/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.12.0/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<table id="table_id" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Metadata</th>
<th>Results</th>
<th>Response</th>
</tr>
</thead>
<tbody>
<!-- data -->
</tbody>
</table>
</div>
</body>
</html>我希望这对你有帮助