Question

我是jQuery的新手，所以请不要因为愚蠢的问题而判断我。我要实现的目标是用API来源的汇率填充数据表。

因此，我设法构造了数据表，但是它的主体为空，并且控制台中没有错误，只是我的数据应该存在的“ 正在加载... ”消息。

搜索相似的主题只是没有任何结果。我会很感激您的帮助，因为我已经把头撞在那堵墙上已有2天了。

<head> 
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
  <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>       
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"> 
</head> 
<body> 
  <table id="rates"></table> 
</body>

var key = '8366e7a49e014c729111a0ac6e5c7d9d';
var url = 'https://openexchangerates.org/api/latest.json?app_id=';
var dataTable = $('#rates').DataTable({
  sDom: 't',
  ajax: {
    url: url + key
  },
  columns: [{
    title: 'currency'
  },{
    title: 'rate'
  }]
});

Answer 1

似乎您的数据结构不正确。每个数据条目必须对应于DataTables行，因此您的代码应类似于：

var key = '8366e7a49e014c729111a0ac6e5c7d9d';
var url = 'https://openexchangerates.org/api/latest.json?app_id=';

var dataTable = $('#rates').DataTable({
  sDom: 't',
  ajax: {
    url: url+key,
    dataSrc: function(data){
        let apiData = [];
        $.each(data.rates, function(index, entry){
          apiData.push({currency:index, rate:entry});
        });
        return apiData.slice(0,10);
      }
    },
    columns: [
      {title:'currency', data:'currency'},
      {title:'rate', data:'rate'}
    ]
});

<!doctype html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
</head>
<body>
  <table id="rates"></table>
</body>
</html>

jQuery DataTables中的空表主体

1 个答案: