reload new data after updating bootstrap table

Question

i'm using bootstrap table and i want to add data to the table. after clicking on add message i send all the data via ajax to the server. now i want my table automatically to be re-builed with new data that i've just sent.

let me explain it with my code:

when the page is initilly loads its use this code to build the 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
                });
            },
    });

and then when i click in add message button, it goes to this func

$("#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('');
            }
    });
});

and this is my 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>

so the data is in the DB but it is not re-build the table, i tried to search for an answer but didn't find anything.

thanks for all the help!

Answer 1

You have a couple of options.

1. In your success function for addNewMessageToDB, you need to call your getNotificationsFromDB function again and it will repopulate your table.
2. Inside the return data for FormaFitWebService.asmx/addNewMessageToDB, return the updated DB data, and inside the success function, update your table.

Either way, you need to explicitly update your table data. The table doesn't have any kind of implicit data binding that will allow it to automatically update.