DataTable 错误“表中没有可用数据”，表缩小

Question

我正在尝试将 mdbootstrap 的表格插件应用于表格。表格的主体是从 google sheet 文档中提取数据。

当我点击列上的排序图标时，所有数据都消失了，但行 No Data Available in Table 仍然存在。

我想更正它，所以No Data Available in Table 消失了，我可以对通过谷歌表格输入的数据进行排序。

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

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>TEST</title>

  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <link href="css/mdb.min.css" rel="stylesheet">
  <link href="css/style.css" rel="stylesheet">
  <link href="css/addons/datatables.min.css" rel="stylesheet">
</head>

<body>
  <!-- SCRIPTS -->
  <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
  <script type="text/javascript" src="js/popper.min.js"></script>
  <script type="text/javascript" src="js/bootstrap.min.js"></script>
  <script type="text/javascript" src="js/mdb.min.js"></script>
<script type="text/javascript" src="js/addons/datatables.min.js"></script>


<script type="text/javascript">
  $.getJSON("https://spreadsheets.google.com/feeds/list/1l-YCSglU72QEk35AWM0B-OCbLG7eVch4yvuxX2eFLrw/2/public/values?alt=json", function (data) {

var sheetData = data.feed.entry;

var i;
for (i = 0; i < sheetData.length; i++) {

var col1 = data.feed.entry\[i\]\['gsx$col1'\]\['$t'\];
var col2 = data.feed.entry\[i\]\['gsx$col2'\]\['$t'\];
var col3 = data.feed.entry\[i\]\['gsx$col3'\]\['$t'\];
var col4 = data.feed.entry\[i\]\['gsx$col4'\]\['$t'\];

document.getElementById('demo').innerHTML += ('<tr>'+'<td>'+col1+'</td>'+'<td>'+col2+'</td>'+'<td>'+col3+'</td>'+'<td>'+col4+'</td>'+'</tr>');

}
});
  </script>

<script>
  $(document).ready(function () {
  $('#dtBasicExample').DataTable();
  $('.dataTables_length').addClass('bs-select');
  });
  </script>

  <!-- Start your project here-->
  <table id="dtBasicExample" class="table table-striped table-bordered table-sm" cellspacing="0" width="100%">
    <thead>
      <tr>
        <th class="th-sm">COL1
        </th>
        <th class="th-sm">COL2
        </th>
        <th class="th-sm">COL3
        </th>
        <th class="th-sm">COL4
        </th>
      </tr>
    </thead>
    <tbody id="demo"></tbody>

  </table>
  <!-- Start your project here-->
</body>

</html>]

Answer 1

只需这样做， 每次都让身体清晰。在添加新行之前，这样每当您进行排序或下一步或搜索时，它都会清除当前行并显示新行

var i;
document.getElementById('demo').innerHTML = ""; // this will delete the innerhtml
for (i = 0; i < sheetData.length; i++) {

var col1 = data.feed.entry\[i\]\['gsx$col1'\]\['$t'\];
var col2 = data.feed.entry\[i\]\['gsx$col2'\]\['$t'\];
var col3 = data.feed.entry\[i\]\['gsx$col3'\]\['$t'\];
var col4 = data.feed.entry\[i\]\['gsx$col4'\]\['$t'\];

document.getElementById('demo').innerHTML += ('<tr>'+'<td>'+col1+'</td>'+'<td>'+col2+'</td>'+'<td>'+col3+'</td>'+'<td>'+col4+'</td>'+'</tr>');

}