数据表未显示数据

如何解决数据表未显示数据

我已经包含了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' }
    ]
} );

解决方法

您缺少两件事：

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>

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>

数据表未显示数据

如何解决数据表未显示数据

解决方法

相关推荐