数据表不显示数据答案

【问题标题】：Datatables is not displaying the data数据表不显示数据
【发布时间】：2021-02-01 22:48:54
【问题描述】：

我已经包含了网站提供的 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' }
    ]
} );

【问题讨论】：

您在生成数据表时使用了错误的 ID。请尝试$('#table_id').DataTable(...
@PriyankPanchal 还是一样
您能否使用codepen 或jsfiddle 创建一个minimal reproducible example
@PriyankPanchal 这里是它的链接 [jsfiddle.net/fb48zvw6/]

标签： javascript html jquery css datatables

【解决方案1】：

你错过了两件事：

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>

【讨论】：

【解决方案2】：

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>

【讨论】：