数据表不显示数据
我已经像网站提供的那样包含了 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' }
]
} );
梦里花落09212回答
-
富国沪深
你错过了两件事：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
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>
随时随地看视频慕课网APP
相关分类
JavaScript