Ошибка DataTable «Нет данных в таблице», таблица сжимается - PullRequest
Новая
       7

Ошибка DataTable «Нет данных в таблице», таблица сжимается

0 голосов
/ 28 октября 2019

Я пытаюсь применить плагин таблицы mdbootstrap к таблице. Тело таблицы извлекает данные из документа Google. When the page loads, the table loads but the first row says

Когда я нажимаю значок сортировки в столбцах, все данные исчезают, но строка No Data Available in Table все еще остается.

Я хочу исправить это так, чтобы No Data Available in Table исчез, и я смог отсортировать данные, поступающие через листы Google. 

[<!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>]

1 Ответ

0 голосов
/ 29 октября 2019

Просто делай так, каждый раз проясняй тело. перед добавлением новых строк, чтобы каждый раз, когда вы выполняете сортировку, следующий или выполняете поиск, он очищал текущие строки и отображал новые 

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>');

}
...