Question

我正在从后端服务器获取一些数据，并尝试每5秒放入一次引导表。尽管我可以在控制台中清楚地看到json对象来自后端，但它无法显示在表中。我尝试对bootstrapTable函数使用刷新，加载和追加以及第一个参数，但这没有帮助。我希望将新数据以json格式从后端添加到现有数据中，但该表在UI中显示为完全空。

JavaScript文件

$(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 + "</pre>";

            console.log("ERROR : ", e +"Response Text: "+ e.responseText);
          //  $("#btn-update").prop("disabled", false);

        },
        complete: function() {
            // Schedule the next request when the current one's complete
            setTimeout(getUpdates, 5000); // The interval set to 5 seconds
        }  
    });
    };
});

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>

Answer 1

通过查看这些库documentation，我认为这不是刷新方法的工作原理。

尝试这样的事情

$(document).ready(function () {
  $('#table1').bootstrapTable({ 
    url: '/getUpdates', 
    onLoadSuccess(data) { 
        setTimeout(getUpdates, 5000) 
    }
  })
  function getUpdates() {
    $('#table1').bootstrapTable('refresh')
  };
});

Answer 2

您必须在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>

无法将动态数据显示到引导表中

2 个答案: