2016-04-02 33 views
0

私は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(''); 
      } 
    }); 
}); 

をFUNC、これは私の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> 

データはDBにありますが、テーブルを再ビルドしていないため、私は答えを検索しようとしましたが、何も見つかりませんでした。

ありがとうございました!

答えて

0

あなたにはいくつかのオプションがあります。 addNewMessageToDBのためのあなたの成功の機能で

  1. は、あなたがもう一度あなたのgetNotificationsFromDB関数を呼び出す必要があり、それはあなたのテーブルを再投入します。
  2. FormaFitWebService.asmx/addNewMessageToDBの返品データ内に更新されたDBデータを返し、成功関数内でテーブルを更新します。

どちらの方法でも、テーブルデータを明示的に更新する必要があります。このテーブルには、自動的に更新できる暗黙のデータバインディングはありません。

関連する問題