<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<!-- <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>-->
<script type="text/javascript" src="http://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
</head>
<body>
<div id="app">
<button id="btnGet">请求接口</button>
<table class="display" id="example"></table>
</div>
</body>
<script>
$(function () {
//这里用异步请求后端,获取数据
// let dataset = [
// {id: 0, name: 'alice', age: 2, money: 2},
// {id: 2, name: 'vilson', age: 5, money: 2}
// ];//数据格式
let colunms = [];
var tables;
var clicks = 1;
//将要渲染的colunms
//根据后端返回的数据,取第一条数据,拼装colunms
function getData() {
$.ajax({
url: "https://health.vilson.xyz/api/index/getData",
success: function (result) {
colunms = [];
let obj = {};
let results = JSON.parse(result);
if (clicks === 2) {
// colunms =
// [
// {id: 1, admin_id: 1, admin_name: "admin", path: "订单管理展示页"},
// {id: 2, admin_id: 2, admin_name: "admin2", path: "2订单管理展示页"},
// {id: 3, admin_id: 3, admin_name: "admin3", path: "3订单管理展示页"},
// {id: 4, admin_id: 4, admin_name: "admin4", path: "4订单管理展示页"},
// ];
results =
[
{id: 1, admin_id: 1, admin_name: "admin", path: "订单管理展示页"},
{id: 2, admin_id: 2, admin_name: "admin2", path: "2订单管理展示页"},
{id: 3, admin_id: 3, admin_name: "admin3", path: "3订单管理展示页"},
{id: 4, admin_id: 4, admin_name: "admin4", path: "4订单管理展示页"},
];
}
$.each(results[0], function (key, val) {
obj = {
"title": key,
"class": "center",
"render": function (data, type, full, meta) {
return full[key];
}
};
colunms.push(obj);
console.log(colunms);
});
console.log(tables);
if (tables) {
tables.destroy();
$('#example').empty();
}
console.log(colunms);
tables = $('#example').DataTable({
"processing": true, //是否显示处理状态(排序的时候,数据很多耗费时间长的话,也会显示这个)
"data": results,//设置数据
"columns": colunms,
"filter": false,
// "destroy": true
});
}
});
}
getData();
$("#btnGet").click(function () {
clicks = 2;
getData();
});
})
;
</script>
<style>
.center {
text-align: center;
}
</style>
</html>