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

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

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

На шаблоне я получаю данные от соединения с Websocket, вот как я их получаю: 

<script language="javascript">
    mySocket.onmessage = function(event) {
        var data = JSON.parse(event.data);
        console.log('data', data);
        $('history').append('</td><td>'+data['Rate']+'</td><td>'+data['Quantity']+'</td></tr>')
    };
</script>

И на моем HTML у меня есть дата: 

<table class=" table table-hover" id="history">
    <thead>
      <tr>
        <th>RATE</th>
        <th>QUANTITY</th>
      </tr>
    </thead>
<tbody>

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

Вместо этого я хочу следующее: таблица сохраняет фиксированную высоту 10 записей, поэтому каждый раз, когда поступает новое сообщение, сообщение добавляется в первую строку строки таблица, и сообщение, которое находится на десятом месте таблицы исчезает. Есть ли способ сделать это? Заранее спасибо.

1 Ответ

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

Возможно, ваш код не работает.

Измените его следующим образом. 

<table class=" table table-hover" id="history">
    <thead>
      <tr>
        <th>RATE</th>
        <th>QUANTITY</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
</table>

<script language="javascript">
    mySocket.onmessage = function(event) {
        var data = JSON.parse(event.data);
        console.log('data', data);
        $('#history > tbody').prepend('<tr><td>'+data['Rate']+'</td><td>'+data['Quantity']+'</td></tr>');
        if ($('#history > tbody > tr').length > 10) {
           $('#history > tbody > tr:last-child').remove();
        }

    };
</script>


 var ind = 0;
    setInterval(function () {
        ind++;
        $('#history > tbody').prepend('<tr><td>aaa' + ind + '</td><td>bbb</td></tr>');
        if ($('#history > tbody > tr').length > 10) {
            $('#history > tbody > tr:last-child').remove();
        }
    }, 1000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table class=" table table-hover" id="history">
    <thead>
    <tr>
        <th>RATE</th>
        <th>QUANTITY</th>
    </tr>
    </thead>
    <tbody>
    </tbody>
</table>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...