Question

我正在使用bootstrap table，我希望将数据添加到表格中。点击添加消息后，我通过ajax将所有数据发送到服务器。现在我希望我的桌子能够自动重新上传我刚发送的新数据。

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

当页面是initilly加载时，使用此代码构建表

$(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>

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

感谢所有的帮助！

Answer 1

你有几个选择。

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

无论哪种方式，您都需要显式更新表数据。该表没有任何类型的隐式数据绑定，可以自动更新。

更新引导表后重新加载新数据

1 个答案: