我已经像网站提供的那样包含了 CDN，即使复制粘贴了每一行代码，仍然无法显示或显示任何结果。这是CDN<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css"><script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>这是我的代码<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css"><script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script><body><table id="example" class="display"> <thead> <tr> <th>Name</th> <th>Position</th> <th>Salary</th> </tr> </thead></table></body>这是脚本[ { "name": "Tiger Nixon", "position": "System Architect", "salary": "$3,120" }, { "name": "Garrett Winters", "position": "Director", "salary": "$5,300" }]$('#example').DataTable( { data: data, columns: [ { data: 'name' }, { data: 'position' }, { data: 'salary' } ]} );
2 回答
富国沪深
TA贡献1790条经验 获得超9个赞
你错过了两件事：
JQuery 库
变量
data_
请检查以下解决方案。
var data = [{
"name": "Tiger Nixon",
"position": "System Architect",
"salary": "$3,120"
},
{
"name": "Garrett Winters",
"position": "Director",
"salary": "$5,300"
}
]
$('#example').DataTable({
data: data,
columns: [{
data: 'name'
},
{
data: 'position'
},
{
data: 'salary'
}
]
});
<html>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>
<body>
<table id="example" class="display">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Salary</th>
</tr>
</thead>
</table>
</body>
</html>
哈士奇WWW
TA贡献1799条经验 获得超6个赞
jquery datatables.js 需要jquery。你应该在 jquery.datatables.js 之前添加它。
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>
And you even don't need to define columns in your datatable, datatables does the work itself :
<body>
<table id="example" class="display" width="100%"></table>
</body>
<script>
var dataSet = [
[ "Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800" ],
[ "Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750" ],
];
$(document).ready(function() {
$('#example').DataTable( {
data: dataSet,
columns: [
{ title: "Name" },
{ title: "Position" },
{ title: "Office" },
{ title: "Extn." },
{ title: "Start date" },
{ title: "Salary" }
]
} );
} );
</script>
添加回答
举报
0/150
提交
取消