Question

我正在使用DataTables显示非常简单的数据，Datatables出现以下错误：

DataTables警告：表id = example-请求的第0行第1列的未知参数'County'。有关此错误的更多信息，请参见http://datatables.net/tn/4

这是我的代码：

var res = [{
    "School": "London"
  },
  {
    "County": "South Yorks"
  },
  {
    "Country": "UK"
  }
];

$(document).ready(function() {
  $('#example').DataTable({
    data: res,
    "columns": [{
        "data": "School"
      },
      {
        "data": "County"
      },
      {
        "data": "Country"
      },
    ]
  });

});

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.15/lodash.min.js" integrity="sha256-VeNaFBVDhoX3H+gJ37DpT/nTuZTdjYro9yBruHjVmoQ=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" />
<div class="container-fluid">
  <div class="row">
    <table id="example" class="display" style="width:100%">
      <thead>
        <tr>
          <th>School</th>
          <th>County</th>
          <th>Country</th>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <th>School</th>
          <th>County</th>
          <th>Country</th>
        </tr>
      </tfoot>
    </table>
  </div>
</div>

有任何帮助想法吗？

谢谢

Answer 1

您的data数组对象是错误的。尝试这样

  var res = [{
      "School": "London",
      "County": "South Yorks",
      "Country": "UK",
    }
  ];

在数据上，在单个对象而不是单个对象中使用键值对

参考https://datatables.net/manual/data/#Objects

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.15/lodash.min.js" integrity="sha256-VeNaFBVDhoX3H+gJ37DpT/nTuZTdjYro9yBruHjVmoQ=" crossorigin="anonymous"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" />

  <title>Document</title>
</head>

<body>
  <div class="container-fluid">
    <div class="row">
      <table id="example" class="display" style="width:100%">
        <thead>
          <tr>
            <th>School</th>
            <th>County</th>
            <th>Country</th>
          </tr>
        </thead>
        <tfoot>
          <tr>
            <th>School</th>
            <th>County</th>
            <th>Country</th>
          </tr>
        </tfoot>
      </table>
    </div>
  </div>

</body>


<script type="text/javascript">
  var res = [{
      "School": "London",
      "County": "South Yorks",
      "Country": "UK",
    }
  ];

  $(document).ready(function() {
    $('#example').DataTable({
      data: res,
      "columns": [{
          "data": "School"
        },
        {
          "data": "County"
        },
        {
          "data": "Country"
        },
      ]
    });

  });
</script>

</html>

数据表显示错误，但显示错误

1 个答案: