更新后重新加载新数据 bootstrap table

Question

我正在使用 bootstrap table，我想向 table 添加数据。单击添加消息后，我通过 ajax 将所有数据发送到服务器。现在我希望我的 table 自动用我刚刚发送的新数据重新构建。

让我用我的代码解释一下：

当页面初始加载时，使用此代码构建 table

$(document).ready(function () {

    var request = {                     
    };

    var dataString = JSON.stringify(request);
    $.ajax({
        url: 'FormaFitWebService.asmx/getNotificationsFromDB', 
        type: 'POST',
        contentType: 'application/json; charset = utf-8',
        dataType: 'json',
        data: dataString,
        success:
            function successCBcreateNewEventInDB(doc) {
                doc = $.parseJSON(doc.d);
                $('#NotificationTable').bootstrapTable({
                    data: doc
                });
            },
    });

然后当我点击添加消息按钮时，它转到这个函数

$("#addMessage").click(function () {

    var messageText = $('#NotificationText').val();

    if (messageText == "") {
        alert("message cannot be empty");
        return 0;
    }

    var request = { messageText: messageText };
    var dataString = JSON.stringify(request);
    $.ajax({
        url: 'FormaFitWebService.asmx/addNewMessageToDB',
        type: 'POST',
        contentType: 'application/json; charset = utf-8',
        dataType: 'json',
        data: dataString,
        success:
            function successCBgetClassesFromDB(result) {
                result = $.parseJSON(result.d);
                alert(result);
                $('#NotificationText').val('');
            }
    });
});

这是我的 html:

<textarea rows="5" id="NotificationText" class="form-control"  placeholder="type here new message" ></textarea>
</div>
<button id="addMessage" type="button" class="btn btn-info">
<span class="glyphicon glyphicon-plus"></span>&nbsp; Add message
</button>
<br />
<hr style="border-width:3px" />
<table id="NotificationTable" class="table table-hover table-bordered">
<thead>
<tr>
<th data-field="state" data-checkbox="true"></th>
<th data-field="id" class="text-right">id</th>
<th data-field="content" class="text-right">content</th>
</tr>
</thead>
</table>

所以数据在数据库中，但它不是重新构建 table，我试图搜索答案但没有找到任何东西。

感谢大家的帮助！

Answer 1

你有几个选择。

在 addNewMessageToDB 的成功函数中，您需要再次调用 getNotificationsFromDB 函数，它将重新填充您的 table.
在 FormaFitWebService.asmx/addNewMessageToDB 的 return 数据内，return 更新的数据库数据，并在成功函数内，更新您的 table.

无论哪种方式，您都需要明确更新您的 table 数据。 table 没有任何允许它自动更新的隐式数据绑定。

更新后重新加载新数据 bootstrap table

reload new data after updating bootstrap table

jquery

twitter-bootstrap

bootstrap-table