Как я могу перезаписать данные в Datatables? - PullRequest
Новая
       8

Как я могу перезаписать данные в Datatables?

0 голосов
/ 24 апреля 2020

В шаблоне у меня есть подключение к веб-сокету, которое каждую секунду отправляет данные на страницу. Таким образом, каждую секунду принимается новый массив массивов, такой как приведенный ниже, только с разными значениями. Я пытаюсь показать эти данные на основе данных. Проблема в том, что мне нужно переопределить данные в таблице, поэтому каждый раз, когда я получаю новый массив массивов, предыдущие данные, которые были в таблице, должны перезаписываться новыми записями. 

var data = [
[1, 5],
[9, 3],
[71.55, 17],
[1800, 20],
[713, 3],
]

Вот что я попробовал: 

$.each(data, function(key,value) {
    $('#mytable').append('<tr><td>'+value[0]+'</td><td>'+value[1]+'</td></tr>')
})

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

Я также пытался: 

$.each(data, function(key,value) {
    $('#mytable').html('<tr><td>'+value[0]+'</td><td>'+value[1]+'</td></tr>')
})

Но это не сработает, так как он будет только l oop через массив и показывать только одну запись массива за раз.

Вот таблица: 

<table id="mytable" class="pos-table table table-striped table-hover">
  <thead>
    <tr>
      <th>RATE</th>
      <th>AMOUNT</th>
    </tr>
  </thead>
</table>

1 Ответ

0 голосов
/ 24 апреля 2020

Вы должны сгенерировать dataTable в переменной, затем вы можете уничтожить его, добавить строки и снова в переменной создать dataTable 

   tb.destroy();
   // insert rows
   tb=$('#mytable').DataTable();


<html>

<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.20/js/jquery.dataTables.min.js"></script>
</head>

<body>

  <table id="mytable" class="pos-table table table-striped table-hover">
    <thead>
      <tr>
        <th>RATE</th>
        <th>AMOUNT</th>
      </tr>
    </thead>
  </table>
  <button onclick="add();">add</button>

  </button>
  <script>
    var data = [
      [1, 5],
      [9, 3],
      [71.55, 17],
      [1800, 20],
      [713, 3],
    ]
    var tb = $('#mytable').DataTable();
    $(document).ready(function() {
      add();
    });

    function add(table) {
      tb.destroy();
      $.each(data, function(key, value) {
        $('#mytable').append('<tr><td>' + value[0] + '</td><td>' + value[1] + '</td></tr>')
      })
      tb = $('#mytable').DataTable();
    }
  </script>
</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...