数据表不显示数据

Question

I already include the CDN like that the website provide and still unable to show or display any result even when copy pasted every single line of code.我已经包含了网站提供的 CDN，即使复制粘贴每一行代码，仍然无法显示或显示任何结果。
Here is the 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>

Here is my code这是我的代码

<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>

Here is the script这是脚本

[
    {
        "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' }
    ]
} );

Answer 1

You are missing two things:你错过了两件事：

JQuery library jQuery 库
The data variable data变量

Please check the solution below.请检查下面的解决方案。

 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>

Answer 2

Jquery datatables.js needs jquery. jquery datatables.js 需要 jquery。 You should add it before jquery.datatables.js.您应该在 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>

数据表不显示数据

问题描述

2 个解决方案

解决方案1
2 已采纳 2020-10-19 07:28:19

解决方案2
1 2020-10-19 07:35:26

数据表不显示数据

问题描述

2 个解决方案

解决方案1 2 已采纳 2020-10-19 07:28:19

解决方案2 1 2020-10-19 07:35:26

解决方案1
2 已采纳 2020-10-19 07:28:19

解决方案2
1 2020-10-19 07:35:26