Невозможно отобразить динамические данные в таблицу начальной загрузки - PullRequest
Новая
       18

Невозможно отобразить динамические данные в таблицу начальной загрузки

0 голосов
/ 11 апреля 2019

Я получаю некоторые данные с внутреннего сервера и пытаюсь добавить в таблицу начальной загрузки каждые 5 секунд.Он не может отображаться в таблице, хотя я ясно вижу объект json, исходящий из бэкэнда в моей консоли.Я попытался использовать refresh, load и append, а также первый аргумент функции bootstrapTable, но это не помогло.Я хочу, чтобы новые данные добавлялись к существующим данным, когда они поступают из серверной части в формате json, но таблица отображается как полностью пустая в пользовательском интерфейсе.

Файл Javascript 

<code>$(document).ready(function() {
    getUpdates();

function getUpdates() {
 $.ajax({
        type: "GET",
        contentType: "application/json",
        url: "/getUpdates",
        dataType: 'json',
        cache: false,
        timeout: 600000,
        success: function (output) {

           // var $table = $('#table');
            $('#table1').bootstrapTable('refresh', {
                data: output
            });
            console.log("SUCCESS : ", output);  //this display correctly in console

        },
        error: function (e) {

            var json = "<h4>Response:</h4><pre>"
                + e.responseText + "
"; console.log("ОШИБКА:", e + "Текст ответа:" + e.responseText); // $ ("# btn-update"). Prop ("disabled", false);}, завершение: function () {//Запланировать следующий запрос, когда текущий объект завершит setTimeout (getUpdates, 5000); // Интервал установлен в 5 секунд}});};});

html 

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <title>Updates through messaging</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.14.2/dist/bootstrap-table.min.css">
    <link rel="stylesheet" type="text/css" href="webjars/bootstrap/3.3.7/css/bootstrap.min.css"/>
</head>
<body>


<div class="container" style="min-height: 500px">

    <div class="starter-template">
        <h1>CDC Consumer Example </h1>

        <div class="container">
            <table id="table1" data-height="450">
                <thead>
                    <tr>
                        <th data-field="id">Id</th>
                        <th data-field="oldValue">Old Value</th>
                        <th data-field="newValue">New Value</th>
                        <th data-field="tableName">Table Name</th>
                        <th data-field="columnName">Column Name</th>  
                        <th data-field="timestamp">Timestamp</th>          
                    </tr>
                </thead>            
            </table>
        </div>
    </div>

</div>



<script type="text/javascript"src="webjars/jquery/2.2.4/jquery.min.js"></script>

<script type="text/javascript" src="javascript/entry.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.14.2/dist/bootstrap-table.min.js"></script>


</body>
</html>

Ответы [ 2 ]

1 голос
/ 12 апреля 2019

Вы должны использовать load, а не refresh в $('#table1').bootstrapTable('refresh',{data: output}); и просто указать новые данные в качестве второго параметра, для лучшего понимания вы можете увидеть мой пример ниже (он загружается каждые 5 секунд): 

var mydata = [
 { id: 6521761346336241, 
   columnName: "sys_role_cd1", 
   newValue: "PARTY1", 
   oldValue: "PART1", 
   tableName: "entries1", 
   timestamp: 15550157197331
 }];

$('#table1').bootstrapTable({data: mydata});

window.setInterval(function(){
  //you can call your ajax and reload your table here
  $(function () {
    mydata.push({ 
       id: 6521761346336242, 
       columnName: "sys_role_cd2", 
       newValue: "PARTY2", 
       oldValue: "PART2", 
       tableName: "entries2", 
       timestamp: 15550157197332
    });
    $('#table1').bootstrapTable('load',mydata);
  });
  //console.log("data reload",mydata);
}, 5000);
// to stop this loop you can use `clearInterval()`
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/bootstrap-table.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/bootstrap-table.min.js"></script>
    
    
    <div class="container" style="min-height: 500px">

    <div class="starter-template">
        <h1>CDC Consumer Example </h1>

        <div class="container">
            <table id="table1" data-height="450">
                <thead>
                    <tr>
                        <th data-field="id">Id</th>
                        <th data-field="oldValue">Old Value</th>
                        <th data-field="newValue">New Value</th>
                        <th data-field="tableName">Table Name</th>
                        <th data-field="columnName">Column Name</th> 
                        <th data-field="timestamp">Timestamp</th>   
                    </tr>
                </thead>            
            </table>
        </div>
    </div>

    </div>
1 голос
/ 12 апреля 2019

просмотр этих библиотек документация Не думаю, что так работает метод обновления.

попробуйте что-то вроде этого 

$(document).ready(function () {
  $('#table1').bootstrapTable({ 
    url: '/getUpdates', 
    onLoadSuccess(data) { 
        setTimeout(getUpdates, 5000) 
    }
  })
  function getUpdates() {
    $('#table1').bootstrapTable('refresh')
  };
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...